@siemens/element-ng 48.1.0 → 48.2.0

package/fesm2022/siemens-element-ng-typeahead.mjs

@@ -1,15 +1,34 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { inject, computed, viewChild, ElementRef, HostListener, ChangeDetectionStrategy, Component, input, booleanAttribute, numberAttribute, output, signal, Injector, Directive, NgModule } from '@angular/core';
+import { Directive, inject, computed, viewChild, ElementRef, HostListener, ChangeDetectionStrategy, Component, input, booleanAttribute, numberAttribute, output, signal, Injector, effect, NgModule } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@siemens/element-ng/autocomplete';
 import { SiAutocompleteDirective, SiAutocompleteListboxDirective, SiAutocompleteOptionDirective } from '@siemens/element-ng/autocomplete';
 import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
-import { ReplaySubject, isObservable, of } from 'rxjs';
+import { ReplaySubject, isObservable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { NgTemplateOutlet } from '@angular/common';
 import { SiIconComponent } from '@siemens/element-ng/icon';
 
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+class SiTypeaheadItemTemplateDirective {
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiTypeaheadItemTemplateDirective, isStandalone: true, selector: "[siTypeaheadItemTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siTypeaheadItemTemplate]'
+                }]
+        }] });
+
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
@@ -56,7 +75,7 @@ class SiTypeaheadComponent {
         this.parent.selectMatch(match);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTypeaheadComponent, isStandalone: true, selector: "si-typeahead", host: { listeners: { "mousedown": "onMouseDown($event)" }, classAttribute: "w-100" }, viewQueries: [{ propertyName: "typeaheadElement", first: true, predicate: ["typeahead"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadTemplate>\n  @if (multiselect()) {\n    <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n      <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n    </div>\n  }\n  @if (match.iconClass) {\n    <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n  }\n  @for (segment of match.result; track $index) {\n    <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n  }\n</ng-template>\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n  #typeahead\n  class=\"typeahead dropdown-menu\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  [class.d-none]=\"!matches().length\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  <!-- Loop through every match and bind events, the mousedown prevent default is to prevent the host from losing focus on click -->\n  @for (match of matches(); track $index) {\n    <li\n      #typeaheadMatch\n      class=\"dropdown-item me-4\"\n      [siAutocompleteOption]=\"match\"\n      [attr.aria-label]=\"match.text\"\n      [attr.aria-selected]=\"multiselect() ? match.itemSelected : null\"\n      (click)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <!-- Display either a template set as the input or the template above -->\n      <ng-template\n        [ngTemplateOutlet]=\"parent.typeaheadItemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          item: match.option,\n          index: $index,\n          match: match,\n          query: parent.query()\n        }\"\n      />\n    </li>\n  }\n</ul>\n", styles: [".dropdown-menu{display:block;position:relative;inset-block-start:0;inset-inline-start:0;margin-block-start:1px;overflow-y:auto;overflow-x:hidden;max-block-size:100%}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiTypeaheadComponent, isStandalone: true, selector: "si-typeahead", host: { listeners: { "mousedown": "onMouseDown($event)" }, classAttribute: "w-100" }, viewQueries: [{ propertyName: "typeaheadElement", first: true, predicate: ["typeahead"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadItemTemplate>\n  @if (multiselect()) {\n    <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n      <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n    </div>\n  }\n  @if (match.iconClass) {\n    <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n  }\n  @for (segment of match.result; track $index) {\n    <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n  }\n</ng-template>\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n  #typeahead\n  class=\"typeahead dropdown-menu\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  [class.d-none]=\"!matches().length\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  <!-- Loop through every match and bind events, the mousedown prevent default is to prevent the host from losing focus on click -->\n  @for (match of matches(); track $index) {\n    <li\n      #typeaheadMatch\n      class=\"dropdown-item\"\n      [siAutocompleteOption]=\"match\"\n      [attr.aria-label]=\"match.text\"\n      [attr.aria-selected]=\"multiselect() ? match.itemSelected : null\"\n      (click)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <!-- Display either a template set as the input or the template above -->\n      <ng-template\n        [ngTemplateOutlet]=\"parent.typeaheadItemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          item: match.option,\n          index: $index,\n          match: match,\n          query: parent.query()\n        }\"\n      />\n    </li>\n  }\n</ul>\n", styles: [".dropdown-menu{display:block;position:relative;inset-block-start:0;inset-inline-start:0;margin-block-start:1px;overflow-y:auto;overflow-x:hidden;max-block-size:100%}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiTypeaheadItemTemplateDirective, selector: "[siTypeaheadItemTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadComponent, decorators: [{
             type: Component,
@@ -65,13 +84,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SiAutocompleteOptionDirective,
                         SiIconComponent,
                         NgTemplateOutlet,
-                        SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'w-100' }, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadTemplate>\n  @if (multiselect()) {\n    <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n      <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n    </div>\n  }\n  @if (match.iconClass) {\n    <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n  }\n  @for (segment of match.result; track $index) {\n    <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n  }\n</ng-template>\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n  #typeahead\n  class=\"typeahead dropdown-menu\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  [class.d-none]=\"!matches().length\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  <!-- Loop through every match and bind events, the mousedown prevent default is to prevent the host from losing focus on click -->\n  @for (match of matches(); track $index) {\n    <li\n      #typeaheadMatch\n      class=\"dropdown-item me-4\"\n      [siAutocompleteOption]=\"match\"\n      [attr.aria-label]=\"match.text\"\n      [attr.aria-selected]=\"multiselect() ? match.itemSelected : null\"\n      (click)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <!-- Display either a template set as the input or the template above -->\n      <ng-template\n        [ngTemplateOutlet]=\"parent.typeaheadItemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          item: match.option,\n          index: $index,\n          match: match,\n          query: parent.query()\n        }\"\n      />\n    </li>\n  }\n</ul>\n", styles: [".dropdown-menu{display:block;position:relative;inset-block-start:0;inset-inline-start:0;margin-block-start:1px;overflow-y:auto;overflow-x:hidden;max-block-size:100%}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"] }]
+                        SiTranslatePipe,
+                        SiTypeaheadItemTemplateDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'w-100' }, template: "<!-- Template to be used for every match, can be replaced using an input. -->\n<ng-template #defaultItemTemplate let-match=\"match\" siTypeaheadItemTemplate>\n  @if (multiselect()) {\n    <div class=\"d-flex pe-4\" aria-hidden=\"true\">\n      <span class=\"form-check-input si-form-checkbox\" [class.checked]=\"match.itemSelected\"></span>\n    </div>\n  }\n  @if (match.iconClass) {\n    <si-icon class=\"icon me-2\" [icon]=\"match.iconClass\" />\n  }\n  @for (segment of match.result; track $index) {\n    <span [class.typeahead-match-segment-matching]=\"segment.isMatching\">{{ segment.text }}</span>\n  }\n</ng-template>\n\n<!-- Only display the component if there are any matches and set the CSS transform to properly position the typeahead -->\n<ul\n  #typeahead\n  class=\"typeahead dropdown-menu\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  [class.d-none]=\"!matches().length\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  <!-- Loop through every match and bind events, the mousedown prevent default is to prevent the host from losing focus on click -->\n  @for (match of matches(); track $index) {\n    <li\n      #typeaheadMatch\n      class=\"dropdown-item\"\n      [siAutocompleteOption]=\"match\"\n      [attr.aria-label]=\"match.text\"\n      [attr.aria-selected]=\"multiselect() ? match.itemSelected : null\"\n      (click)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.preventDefault()\"\n    >\n      <!-- Display either a template set as the input or the template above -->\n      <ng-template\n        [ngTemplateOutlet]=\"parent.typeaheadItemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{\n          item: match.option,\n          index: $index,\n          match: match,\n          query: parent.query()\n        }\"\n      />\n    </li>\n  }\n</ul>\n", styles: [".dropdown-menu{display:block;position:relative;inset-block-start:0;inset-inline-start:0;margin-block-start:1px;overflow-y:auto;overflow-x:hidden;max-block-size:100%}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"] }]
         }], propDecorators: { onMouseDown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
             }] } });
 
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Constructs a typeahead search and provides the matches as a signal.
+ *
+ * @param options - Factory function that should return the array of options to search in.
+ * Is run in a reactive context.
+ * @param query - Factory function that should return the current search query. Is run in a reactive context.
+ * @param config - Configuration for the search. Is run in a reactive context.
+ *
+ * @example
+ * In a real world, myOptions and mayQuery would be signals.
+ * ```ts
+ * const search = typeaheadSearch(
+ *   () => myOptions().map(...),
+ *   () => myQuery().toLowerCase(),
+ *   () => ({ matchAllTokens: 'separately' })
+ * )
+ * ```
+ */
+const typeaheadSearch = (options, query, config) => computed(() => new TypeaheadSearch(options, query, config()).matches());
+class TypeaheadSearch {
+    datasource;
+    query;
+    options;
+    matches = computed(() => this.search(this.datasource(), this.query()));
+    constructor(datasource, query, options) {
+        this.datasource = datasource;
+        this.query = query;
+        this.options = options;
+    }
+    escapeRegex(query) {
+        return query.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+    }
+    search(options, query) {
+        try {
+            const entireQueryRegex = new RegExp(this.escapeRegex(query), 'gi');
+            const queryParts = !this.options.disableTokenizing
+                ? query.split(/\s+/g).filter(queryPart => queryPart)
+                : query
+                    ? [query]
+                    : [];
+            const queryRegexes = queryParts.map(queryPart => new RegExp(this.escapeRegex(queryPart), 'gi'));
+            // Process the options.
+            const matches = [];
+            options.forEach(option => {
+                const optionValue = option.text;
+                const stringMatch = optionValue.toLocaleLowerCase().trim() === query.toLocaleLowerCase().trim();
+                const candidate = {
+                    option: option.option,
+                    text: optionValue,
+                    result: [],
+                    stringMatch,
+                    atBeginning: false,
+                    matches: 0,
+                    uniqueMatches: 0,
+                    uniqueSeparateMatches: 0,
+                    matchesEntireQuery: false,
+                    matchesAllParts: false,
+                    matchesAllPartsSeparately: false
+                };
+                // Only search the options if a part of the query is at least one character long to prevent an endless loop.
+                if (queryParts.length === 0) {
+                    if (optionValue) {
+                        candidate.result.push({
+                            text: optionValue,
+                            isMatching: false,
+                            matches: 0,
+                            uniqueMatches: 0
+                        });
+                    }
+                    matches.push(candidate);
+                }
+                else {
+                    const allResults = [];
+                    const allIndexes = [];
+                    candidate.matchesEntireQuery = !!optionValue.match(entireQueryRegex);
+                    // Loop through the option value to find multiple matches, then store every segment (matching or non-matching) in the results.
+                    queryRegexes.forEach((queryRegex, index) => {
+                        let regexMatch = queryRegex.exec(optionValue);
+                        while (regexMatch) {
+                            allResults.push({
+                                index,
+                                start: regexMatch.index,
+                                end: regexMatch.index + regexMatch[0].length,
+                                result: regexMatch[0]
+                            });
+                            if (!regexMatch.index) {
+                                candidate.atBeginning = true;
+                            }
+                            if (!allIndexes.includes(index)) {
+                                allIndexes.push(index);
+                            }
+                            regexMatch = queryRegex.exec(optionValue);
+                        }
+                    });
+                    candidate.matchesAllParts = allIndexes.length === queryParts.length;
+                    // Check if all parts of the query match at least once (if required).
+                    if (this.options.matchAllTokens === 'no' || candidate.matchesAllParts) {
+                        const combinedResults = [];
+                        // First combine intersecting (or if set to independently adjacent) results to combined results.
+                        // We achieve this by first sorting them by the starting index, then by the ending index and then looking for overlaps.
+                        allResults
+                            .sort((a, b) => a.start - b.start || a.end - b.end)
+                            .forEach(result => {
+                            if (combinedResults.length) {
+                                const foundPreviousResult = combinedResults.find(previousResult => this.options.matchAllTokens === 'independently'
+                                    ? result.start <= previousResult.end
+                                    : result.start < previousResult.end);
+                                if (foundPreviousResult) {
+                                    foundPreviousResult.result += result.result.slice(foundPreviousResult.end - result.start, result.result.length);
+                                    if (result.end > foundPreviousResult.end) {
+                                        foundPreviousResult.end = result.end;
+                                    }
+                                    foundPreviousResult.indexes.push(result.index);
+                                    if (!foundPreviousResult.uniqueIndexes.includes(result.index)) {
+                                        foundPreviousResult.uniqueIndexes.push(result.index);
+                                    }
+                                    return;
+                                }
+                            }
+                            combinedResults.push({
+                                ...result,
+                                indexes: [result.index],
+                                uniqueIndexes: [result.index]
+                            });
+                        });
+                        // Recursively go through all unique combinations of the unique indexes to get the option which has the most indexes.
+                        const countUniqueSubindexes = (indexIndex = 0, previousIndexes = []) => indexIndex === combinedResults.length
+                            ? previousIndexes.length
+                            : Math.max(previousIndexes.length, ...combinedResults[indexIndex].uniqueIndexes
+                                .filter(index => !previousIndexes.includes(index))
+                                .map(index => countUniqueSubindexes(indexIndex + 1, [index, ...previousIndexes])));
+                        candidate.uniqueSeparateMatches = countUniqueSubindexes();
+                        candidate.matchesAllPartsSeparately =
+                            candidate.uniqueSeparateMatches === queryParts.length;
+                        let currentPreviousEnd = 0;
+                        // Add the combined results to the candidate including the non-matching parts in between.
+                        combinedResults.forEach(result => {
+                            const textBefore = optionValue.slice(currentPreviousEnd, result.start);
+                            if (textBefore) {
+                                candidate.result.push({
+                                    text: textBefore,
+                                    isMatching: false,
+                                    matches: 0,
+                                    uniqueMatches: 0
+                                });
+                            }
+                            candidate.result.push({
+                                text: result.result,
+                                isMatching: true,
+                                matches: result.indexes.length,
+                                uniqueMatches: result.uniqueIndexes.length
+                            });
+                            currentPreviousEnd = result.end;
+                            candidate.matches += result.indexes.length;
+                            candidate.uniqueMatches += result.uniqueIndexes.length;
+                        });
+                        // Check if there are result segments and all parts are matched independently (if required).
+                        if (candidate.result.length !== 0 &&
+                            ((this.options.matchAllTokens !== 'separately' &&
+                                this.options.matchAllTokens !== 'independently') ||
+                                candidate.matchesAllPartsSeparately)) {
+                            const textAtEnd = optionValue.slice(currentPreviousEnd);
+                            if (textAtEnd) {
+                                candidate.result.push({
+                                    text: textAtEnd,
+                                    isMatching: false,
+                                    matches: 0,
+                                    uniqueMatches: 0
+                                });
+                            }
+                            matches.push(candidate);
+                        }
+                    }
+                }
+            });
+            return matches;
+        }
+        catch {
+            // Could not create regex (only in extremely rare cases, maybe even impossible), so return an empty array.
+            return [];
+        }
+    }
+}
+
 class SiTypeaheadSorting {
     sortMatches(matches) {
         // Sort the matches,
@@ -290,7 +498,7 @@ class SiTypeaheadDirective {
     /** Emits whenever the typeahead overlay is opened or closed. */
     typeaheadOpenChange = output();
     /** @internal */
-    foundMatches = signal([]);
+    foundMatches = computed(() => this.typeaheadProcess() ? this.processedSearch() : this.unprocessedSearch());
     /** @internal */
     query = signal('');
     /**
@@ -305,12 +513,92 @@ class SiTypeaheadDirective {
     autoComplete = inject(SiAutocompleteDirective);
     $typeahead = new ReplaySubject(1);
     componentRef;
-    component;
     inputTimer;
     sourceSubscription;
-    subscription;
     matchSorter = new SiTypeaheadSorting();
     overlayRef;
+    /**
+     * Indicates that the typeahead can be potentially open.
+     * This signal is typically `true` when the input is focussed.
+     * It may be overridden and set to `false` when escape is pressed
+     * or when an option was selected.
+     */
+    canBeOpen = signal(false);
+    selectionCounter = signal(0);
+    typeaheadOptions = toSignal(this.$typeahead.pipe(map(options => options.map(option => ({
+        text: this.getOptionValue(option),
+        option
+    })))), { initialValue: [] });
+    typeaheadSearch = typeaheadSearch(this.typeaheadOptions, this.query, computed(() => ({
+        matchAllTokens: this.typeaheadMatchAllTokens(),
+        disableTokenizing: !this.typeaheadTokenize(),
+        skipProcessing: !this.typeaheadProcess()
+    })));
+    processedSearch = computed(() => {
+        this.selectionCounter(); // This is a workaround for the multi-select which needs to trigger a change detection in the typeahead component.
+        const matches = this.typeaheadSearch().map(match => ({
+            ...match,
+            itemSelected: this.typeaheadMultiSelect()
+                ? match.option.selected
+                : false,
+            iconClass: this.getOptionField(match.option, 'iconClass')
+        }));
+        if (this.typeaheadSkipSortingMatches()) {
+            return matches;
+        }
+        else {
+            return this.matchSorter.sortMatches(matches);
+        }
+    });
+    unprocessedSearch = computed(() => {
+        this.selectionCounter(); // This is a workaround for the multi-select which needs to trigger a change detection in the typeahead component.
+        return this.typeaheadOptions().map(option => {
+            const itemSelected = this.typeaheadMultiSelect()
+                ? option.selected
+                : false;
+            return {
+                option,
+                text: option.text,
+                result: option.text
+                    ? [{ text: option.text, isMatching: false, matches: 0, uniqueMatches: 0 }]
+                    : [],
+                itemSelected,
+                iconClass: this.getOptionField(option.option, 'iconClass'),
+                stringMatch: false,
+                atBeginning: false,
+                matches: 0,
+                uniqueMatches: 0,
+                uniqueSeparateMatches: 0,
+                matchesEntireQuery: false,
+                matchesAllParts: false,
+                matchesAllPartsSeparately: false,
+                active: false
+            };
+        });
+    });
+    constructor() {
+        effect(() => {
+            // The value needs to fulfil the minimum length requirement set.
+            if (this.canBeOpen() && this.query().length >= this.typeaheadMinLength()) {
+                const matches = this.foundMatches();
+                const escapedQuery = this.escapeRegex(this.query());
+                const equalsExp = new RegExp(`^${escapedQuery}$`, 'i');
+                const fullMatches = matches.filter(match => match.result.length === 1 && equalsExp.test(match.text));
+                if (fullMatches.length > 0) {
+                    this.typeaheadOnFullMatch.emit(fullMatches[0]);
+                }
+                if (matches.length) {
+                    this.loadComponent();
+                }
+                else {
+                    this.removeComponent();
+                }
+            }
+            else {
+                this.removeComponent();
+            }
+        });
+    }
     // Every time the main input changes, detect whether it is async and if it is not make an observable out of the array.
     ngOnChanges(changes) {
         if (changes.siTypeahead) {
@@ -327,10 +615,7 @@ class SiTypeaheadDirective {
     // Clear the current input timeout (if set) and remove the component when the focus of the host is lost.
     onBlur() {
         this.clearTimer();
-        if (this.component) {
-            this.removeComponent();
-        }
-        this.subscription?.unsubscribe();
+        this.canBeOpen.set(false);
     }
     // Start the input timeout to display the typeahead when the host is focussed or a value is inputted into it.
     onInput(event) {
@@ -344,36 +629,14 @@ class SiTypeaheadDirective {
             this.inputTimer = undefined;
             const value = (target.value || target.textContent) ?? firstValue ?? '';
             this.query.set(value);
-            this.subscription?.unsubscribe();
-            // The value needs to fulfil the minimum length requirement set.
-            if (value.length >= this.typeaheadMinLength()) {
-                this.subscription = this.getMatches(this.$typeahead, value).subscribe(matches => {
-                    this.foundMatches.set(matches);
-                    const escapedQuery = this.escapeRegex(value);
-                    const equalsExp = new RegExp(`^${escapedQuery}$`, 'i');
-                    const fullMatches = matches.filter(match => match.result.length === 1 && equalsExp.test(match.text));
-                    if (fullMatches.length > 0) {
-                        this.typeaheadOnFullMatch.emit(fullMatches[0]);
-                    }
-                    if (matches.length) {
-                        this.loadComponent();
-                    }
-                    else {
-                        this.removeComponent();
-                    }
-                });
-            }
-            else {
-                this.removeComponent();
-            }
             this.typeaheadOnInput.emit(value ?? '');
+            this.canBeOpen.set(true);
         }, this.typeaheadWaitMs());
     }
     onKeydownEscape() {
         if (this.typeaheadCloseOnEsc()) {
-            this.subscription?.unsubscribe();
             this.clearTimer();
-            this.removeComponent();
+            this.canBeOpen.set(false);
         }
     }
     onKeydownSpace(event) {
@@ -384,14 +647,13 @@ class SiTypeaheadDirective {
             if (value) {
                 this.selectMatch(value);
                 // this forces change detection in the typeahead component.
-                this.foundMatches.update(matches => [...matches]);
+                this.selectionCounter.update(v => v + 1);
             }
         }
     }
     ngOnDestroy() {
         this.clearTimer();
         this.sourceSubscription?.unsubscribe();
-        this.subscription?.unsubscribe();
         this.overlayRef?.dispose();
     }
     // Dynamically create the typeahead component and then set the matches and the query.
@@ -413,207 +675,36 @@ class SiTypeaheadDirective {
         }
         const typeaheadPortal = new ComponentPortal(SiTypeaheadComponent, null, this.injector);
         this.componentRef = this.overlayRef.attach(typeaheadPortal);
-        this.component = this.componentRef.instance;
         this.typeaheadOpenChange.emit(true);
     }
-    // Get the matches and push them to the subject of the component, then set the query of the component.
-    // If the typeahead options are objects, pick the specified field/property.
-    getOptionValue(option, field) {
-        return typeof option !== 'object' ? option.toString() : (option[field] ?? '');
+    /**
+     * Extracts the display value from a typeahead option.
+     *
+     * For string options, returns the string value directly.
+     * For object options, returns the value of the field specified by {@link typeaheadOptionField}
+     * (defaults to 'name'), or an empty string if the field doesn't exist.
+     *
+     * @param option - The typeahead option to extract the value from
+     * @returns The string representation of the option for display purposes
+     */
+    getOptionValue(option) {
+        return typeof option !== 'object'
+            ? option.toString()
+            : (option[this.typeaheadOptionField()] ?? '');
     }
-    // If enabled, process the matches and sort through them.
-    getMatches(observableList, query) {
-        try {
-            const entireQueryRegex = new RegExp(this.escapeRegex(query), 'gi');
-            const queryParts = this.typeaheadTokenize()
-                ? query.split(/\s+/g).filter(queryPart => queryPart)
-                : query
-                    ? [query]
-                    : [];
-            const queryRegexes = queryParts.map(queryPart => new RegExp(this.escapeRegex(queryPart), 'gi'));
-            return observableList.pipe(map(options => {
-                // Check if the options need to be processed, if not just return an unprocessed object.
-                if (!this.typeaheadProcess()) {
-                    return options.map(option => {
-                        const optionValue = this.getOptionValue(option, this.typeaheadOptionField());
-                        const itemSelected = this.typeaheadMultiSelect()
-                            ? this.getOptionValue(option, 'selected')
-                            : false;
-                        const iconClass = this.getOptionValue(option, 'iconClass');
-                        return {
-                            option,
-                            itemSelected,
-                            text: optionValue,
-                            iconClass,
-                            result: optionValue
-                                ? [{ text: optionValue, isMatching: false, matches: 0, uniqueMatches: 0 }]
-                                : [],
-                            stringMatch: false,
-                            atBeginning: false,
-                            matches: 0,
-                            uniqueMatches: 0,
-                            uniqueSeparateMatches: 0,
-                            matchesEntireQuery: false,
-                            matchesAllParts: false,
-                            matchesAllPartsSeparately: false,
-                            active: false
-                        };
-                    });
-                }
-                else {
-                    // Process the options.
-                    const matches = [];
-                    options.forEach(option => {
-                        const optionValue = this.getOptionValue(option, this.typeaheadOptionField());
-                        const stringMatch = optionValue.toLocaleLowerCase().trim() === query.toLocaleLowerCase().trim();
-                        const itemSelected = this.typeaheadMultiSelect()
-                            ? option['selected']
-                            : false;
-                        const iconClass = this.getOptionValue(option, 'iconClass');
-                        const candidate = {
-                            option,
-                            itemSelected,
-                            text: optionValue,
-                            iconClass,
-                            result: [],
-                            stringMatch,
-                            atBeginning: false,
-                            matches: 0,
-                            uniqueMatches: 0,
-                            uniqueSeparateMatches: 0,
-                            matchesEntireQuery: false,
-                            matchesAllParts: false,
-                            matchesAllPartsSeparately: false
-                        };
-                        // Only search the options if a part of the query is at least one character long to prevent an endless loop.
-                        if (queryParts.length === 0) {
-                            if (optionValue) {
-                                candidate.result.push({
-                                    text: optionValue,
-                                    isMatching: false,
-                                    matches: 0,
-                                    uniqueMatches: 0
-                                });
-                            }
-                            matches.push(candidate);
-                        }
-                        else {
-                            const allResults = [];
-                            const allIndexes = [];
-                            candidate.matchesEntireQuery = !!optionValue.match(entireQueryRegex);
-                            // Loop through the option value to find multiple matches, then store every segment (matching or non-matching) in the results.
-                            queryRegexes.forEach((queryRegex, index) => {
-                                let regexMatch = queryRegex.exec(optionValue);
-                                while (regexMatch) {
-                                    allResults.push({
-                                        index,
-                                        start: regexMatch.index,
-                                        end: regexMatch.index + regexMatch[0].length,
-                                        result: regexMatch[0]
-                                    });
-                                    if (!regexMatch.index) {
-                                        candidate.atBeginning = true;
-                                    }
-                                    if (!allIndexes.includes(index)) {
-                                        allIndexes.push(index);
-                                    }
-                                    regexMatch = queryRegex.exec(optionValue);
-                                }
-                            });
-                            candidate.matchesAllParts = allIndexes.length === queryParts.length;
-                            // Check if all parts of the query match at least once (if required).
-                            if (this.typeaheadMatchAllTokens() === 'no' || candidate.matchesAllParts) {
-                                const combinedResults = [];
-                                // First combine intersecting (or if set to independently adjacent) results to combined results.
-                                // We achieve this by first sorting them by the starting index, then by the ending index and then looking for overlaps.
-                                allResults
-                                    .sort((a, b) => a.start - b.start || a.end - b.end)
-                                    .forEach(result => {
-                                    if (combinedResults.length) {
-                                        const foundPreviousResult = combinedResults.find(previousResult => this.typeaheadMatchAllTokens() === 'independently'
-                                            ? result.start <= previousResult.end
-                                            : result.start < previousResult.end);
-                                        if (foundPreviousResult) {
-                                            foundPreviousResult.result += result.result.slice(foundPreviousResult.end - result.start, result.result.length);
-                                            if (result.end > foundPreviousResult.end) {
-                                                foundPreviousResult.end = result.end;
-                                            }
-                                            foundPreviousResult.indexes.push(result.index);
-                                            if (!foundPreviousResult.uniqueIndexes.includes(result.index)) {
-                                                foundPreviousResult.uniqueIndexes.push(result.index);
-                                            }
-                                            return;
-                                        }
-                                    }
-                                    combinedResults.push({
-                                        ...result,
-                                        indexes: [result.index],
-                                        uniqueIndexes: [result.index]
-                                    });
-                                });
-                                // Recursively go through all unique combinations of the unique indexes to get the option which has the most indexes.
-                                const countUniqueSubindexes = (indexIndex = 0, previousIndexes = []) => indexIndex === combinedResults.length
-                                    ? previousIndexes.length
-                                    : Math.max(previousIndexes.length, ...combinedResults[indexIndex].uniqueIndexes
-                                        .filter(index => !previousIndexes.includes(index))
-                                        .map(index => countUniqueSubindexes(indexIndex + 1, [index, ...previousIndexes])));
-                                candidate.uniqueSeparateMatches = countUniqueSubindexes();
-                                candidate.matchesAllPartsSeparately =
-                                    candidate.uniqueSeparateMatches === queryParts.length;
-                                let currentPreviousEnd = 0;
-                                // Add the combined results to the candidate including the non-matching parts in between.
-                                combinedResults.forEach(result => {
-                                    const textBefore = optionValue.slice(currentPreviousEnd, result.start);
-                                    if (textBefore) {
-                                        candidate.result.push({
-                                            text: textBefore,
-                                            isMatching: false,
-                                            matches: 0,
-                                            uniqueMatches: 0
-                                        });
-                                    }
-                                    candidate.result.push({
-                                        text: result.result,
-                                        isMatching: true,
-                                        matches: result.indexes.length,
-                                        uniqueMatches: result.uniqueIndexes.length
-                                    });
-                                    currentPreviousEnd = result.end;
-                                    candidate.matches += result.indexes.length;
-                                    candidate.uniqueMatches += result.uniqueIndexes.length;
-                                });
-                                // Check if there are result segments and all parts are matched independently (if required).
-                                if (candidate.result.length !== 0 &&
-                                    ((this.typeaheadMatchAllTokens() !== 'separately' &&
-                                        this.typeaheadMatchAllTokens() !== 'independently') ||
-                                        candidate.matchesAllPartsSeparately)) {
-                                    const textAtEnd = optionValue.slice(currentPreviousEnd);
-                                    if (textAtEnd) {
-                                        candidate.result.push({
-                                            text: textAtEnd,
-                                            isMatching: false,
-                                            matches: 0,
-                                            uniqueMatches: 0
-                                        });
-                                    }
-                                    matches.push(candidate);
-                                }
-                            }
-                        }
-                    });
-                    if (this.typeaheadSkipSortingMatches()) {
-                        return matches;
-                    }
-                    else {
-                        return this.matchSorter.sortMatches(matches);
-                    }
-                }
-            }));
-        }
-        catch {
-            // Could not create regex (only in extremely rare cases, maybe even impossible), so return an empty array.
-            return of([]);
-        }
+    /**
+     * Extracts a specific field value from a typeahead option.
+     *
+     * This method is used to access additional properties of object-type options,
+     * such as 'selected' for multi-select functionality or 'iconClass' for displaying icons.
+     *
+     * @param option - The typeahead option to extract the field from
+     * @param field - The name of the field to extract
+     * @returns The field value as a string if the option is an object and the field exists,
+     *          otherwise undefined
+     */
+    getOptionField(option, field) {
+        return typeof option !== 'object' ? undefined : option[field];
     }
     // Select a match, either gets called due to a enter keypress or from the component due to a click.
     /** @internal */
@@ -628,7 +719,7 @@ class SiTypeaheadDirective {
         this.clearTimer();
         this.typeaheadOnSelect.emit(match);
         if (!this.typeaheadMultiSelect()) {
-            this.removeComponent();
+            this.canBeOpen.set(false);
         }
     }
     // Remove the component by clearing the viewContainerRef
@@ -639,7 +730,6 @@ class SiTypeaheadDirective {
         }
         this.componentRef?.destroy();
         this.componentRef = undefined;
-        this.component = undefined;
     }
     clearTimer() {
         if (this.inputTimer) {
@@ -663,7 +753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     hostDirectives: [SiAutocompleteDirective],
                     exportAs: 'si-typeahead'
                 }]
-        }], propDecorators: { onBlur: [{
+        }], ctorParameters: () => [], propDecorators: { onBlur: [{
                 type: HostListener,
                 args: ['focusout']
             }], onInput: [{
@@ -680,24 +770,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: ['keydown.space', ['$event']]
             }] } });
 
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-class SiTypeaheadItemTemplateDirective {
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiTypeaheadItemTemplateDirective, isStandalone: true, selector: "[siTypeaheadItemTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[siTypeaheadItemTemplate]'
-                }]
-        }] });
-
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT