@siemens/element-ng 47.2.0 → 47.3.0

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

@@ -0,0 +1,746 @@
+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 * as i1$1 from '@siemens/element-ng/autocomplete';
+import { SiAutocompleteDirective, SiAutocompleteListboxDirective, SiAutocompleteOptionDirective } from '@siemens/element-ng/autocomplete';
+import { ReplaySubject, isObservable, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { NgTemplateOutlet } from '@angular/common';
+import { SiIconNextComponent } from '@siemens/element-ng/icon';
+import * as i1 from '@siemens/element-translate-ng/translate';
+import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTypeaheadComponent {
+    parent = inject(SiTypeaheadDirective);
+    matches = computed(() => this.parent.typeaheadOptionsLimit()
+        ? this.parent.foundMatches().slice(0, this.parent.typeaheadOptionsLimit())
+        : this.parent.foundMatches());
+    multiselect = false;
+    // Store the number of rendered matches to know if the height needs to be recalculated.
+    renderedMatchesLength = 0;
+    subscription;
+    typeaheadElement = viewChild.required('typeahead', {
+        read: ElementRef
+    });
+    autocompleteDirective = inject(SiAutocompleteDirective);
+    ngOnInit() {
+        this.multiselect = !!this.parent.typeaheadMultiSelect();
+    }
+    ngAfterViewInit() {
+        this.setHeight(this.typeaheadElement());
+        this.renderedMatchesLength = this.matches().length;
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    onMouseDown(event) {
+        event.preventDefault();
+    }
+    /*
+     * Set the height of the element passed to it (typeahead) if there are items displayed,
+     * the number of displayed items changed and it is scrollable.
+     */
+    setHeight(element) {
+        if (this.matches().length !== 0 && this.matches().length !== this.renderedMatchesLength) {
+            if (this.parent.typeaheadScrollable() &&
+                this.parent.typeaheadOptionsInScrollableView() < this.matches().length) {
+                const computedStyle = getComputedStyle(element.nativeElement);
+                const matchComputedStyle = getComputedStyle(element.nativeElement.firstElementChild);
+                const matchHeight = parseFloat(matchComputedStyle.height || '0');
+                const paddingTop = parseFloat(computedStyle.paddingTop || '0');
+                const paddingBottom = parseFloat(computedStyle.paddingBottom || '');
+                const height = this.parent.typeaheadOptionsInScrollableView() * matchHeight;
+                element.nativeElement.style.maxBlockSize = `${height + paddingTop + paddingBottom + this.parent.typeaheadScrollableAdditionalHeight()}px`;
+            }
+            else {
+                element.nativeElement.style.maxBlockSize = 'auto';
+            }
+        }
+    }
+    // Gets called when a match is selected by clicking on it.
+    selectMatch(match) {
+        this.parent.selectMatch(match);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.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-next 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:700}.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: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i1.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-typeahead', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        SiAutocompleteListboxDirective,
+                        SiAutocompleteOptionDirective,
+                        SiIconNextComponent,
+                        NgTemplateOutlet,
+                        SiTranslateModule
+                    ], 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-next 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:700}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"] }]
+        }], propDecorators: { onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class SiTypeaheadSorting {
+    sortMatches(matches) {
+        // Sort the matches,
+        // first is the option and query an exact match.
+        // then according to whether it is matching in the beginning,
+        // then whether it matches the entire untokenized query.
+        // then according to how many unique separate matches it contains.
+        // then according to how many unique matches it contains.
+        // then according to how many matches it contains.
+        return matches.sort((matchA, matchB) => {
+            if (matchA.stringMatch || matchB.stringMatch) {
+                return matchA.stringMatch ? -1 : 1;
+            }
+            if (matchA.atBeginning) {
+                return !matchB.atBeginning ? -1 : this.compareMatches(matchA, matchB);
+            }
+            else {
+                return matchB.atBeginning ? 1 : this.compareMatches(matchA, matchB);
+            }
+        });
+    }
+    compareMatchesNumbers(matchA, matchB) {
+        return (matchB.uniqueSeparateMatches - matchA.uniqueSeparateMatches ||
+            matchB.uniqueMatches - matchA.uniqueMatches ||
+            matchB.matches - matchA.matches);
+    }
+    compareMatches(matchA, matchB) {
+        if (matchA.matchesEntireQuery) {
+            return !matchB.matchesEntireQuery ? -1 : this.compareMatchesNumbers(matchA, matchB);
+        }
+        else {
+            return matchB.matchesEntireQuery ? 1 : this.compareMatchesNumbers(matchA, matchB);
+        }
+    }
+}
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTypeaheadDirective {
+    static overlayPositions = [
+        {
+            overlayX: 'start',
+            overlayY: 'top',
+            originX: 'start',
+            originY: 'bottom',
+            offsetY: 2
+        },
+        {
+            overlayX: 'start',
+            overlayY: 'bottom',
+            originX: 'start',
+            originY: 'top',
+            offsetY: -4
+        },
+        {
+            overlayX: 'end',
+            overlayY: 'top',
+            originX: 'end',
+            originY: 'bottom',
+            offsetY: 2
+        },
+        {
+            overlayX: 'end',
+            overlayY: 'bottom',
+            originX: 'end',
+            originY: 'top',
+            offsetY: -4
+        }
+    ];
+    /**
+     * Set the options of the typeahead.
+     * Has to be either an Array or an Observable of an Array
+     * of options (string or object)
+     */
+    siTypeahead = input.required();
+    /**
+     * Turns on/off the processing (searching and sorting) of the typeahead options.
+     * Is used when searching and sorting is done externally.
+     *
+     * @defaultValue true
+     */
+    typeaheadProcess = input(true, {
+        transform: booleanAttribute
+    });
+    /**
+     * Makes the typeahead scrollable and sets its height.
+     * Uses {@link typeaheadOptionsInScrollableView} and {@link typeaheadScrollableAdditionalHeight}.
+     *
+     * @defaultValue false
+     */
+    typeaheadScrollable = input(false, { transform: booleanAttribute });
+    /**
+     * If {@link typeaheadScrollable} is `true`, defines the number of items visible at once.
+     *
+     * @defaultValue 10
+     */
+    typeaheadOptionsInScrollableView = input(10);
+    /**
+     * Defines the maximum number of items added into the DOM. Default is 20 and 0 means unlimited.
+     *
+     * @defaultValue 20
+     */
+    typeaheadOptionsLimit = input(20);
+    /**
+     * If {@link typeaheadScrollable} is `true`, defines the number of additional pixels
+     * to be added the the bottom of the typeahead to show users that it is scrollable.
+     *
+     * @defaultValue 13
+     */
+    typeaheadScrollableAdditionalHeight = input(13);
+    /**
+     * Defines the index of the item which should automatically be selected.
+     *
+     * @defaultValue 0
+     */
+    typeaheadAutoSelectIndex = input(0, { transform: numberAttribute });
+    /**
+     * Defines whether the typeahead can be closed using escape.
+     *
+     * @defaultValue true
+     */
+    typeaheadCloseOnEsc = input(true, { transform: booleanAttribute });
+    /**
+     * Defines whether the host value should be cleared when a value is selected.
+     *
+     * @defaultValue false
+     */
+    typeaheadClearValueOnSelect = input(false, { transform: booleanAttribute });
+    /**
+     * Defines the number of milliseconds to wait before displaying a typeahead after the host was
+     * focused or a value inputted.
+     *
+     * @defaultValue 0
+     */
+    typeaheadWaitMs = input(0);
+    /**
+     * Defines the number of characters the value of the host needs to be before a typeahead is displayed.
+     * Use `0` to have it display when focussing the host (clicking or tabbing into it).
+     *
+     * @defaultValue 1
+     */
+    typeaheadMinLength = input(1);
+    /**
+     * Defines the name of the field/property the option string is in when the typeahead options are objects.
+     *
+     * @defaultValue 'name'
+     */
+    typeaheadOptionField = input('name');
+    /**
+     * Defines whether multiselection of typeahead is possible with checkboxes.
+     *
+     * @defaultValue false
+     */
+    typeaheadMultiSelect = input(false, { transform: booleanAttribute });
+    /**
+     * Defines whether to tokenize the search or match the whole search.
+     *
+     * @defaultValue true
+     */
+    typeaheadTokenize = input(true, { transform: booleanAttribute });
+    /**
+     * Defines whether and how to require to match with all the tokens if {@link typeaheadTokenize} is enabled.
+     * - `no` does not require all of the tokens to match.
+     * - `once` requires all of the parts to be found in the search.
+     * - `separately` requires all of the parts to be found in the search where there is not an overlapping different result.
+     * - `independently` requires all of the parts to be found in the search where there is not an overlapping or adjacent different result.
+     *  ('independently' also slightly changes sorting behavior in the same way.)
+     *
+     * @defaultValue 'separately'
+     */
+    typeaheadMatchAllTokens = input('separately');
+    /**
+     * Defines an optional template to use as the typeahead match item instead of the one built in.
+     * Gets the {@link TypeaheadOptionItemContext} passed to it.
+     */
+    typeaheadItemTemplate = input();
+    /**
+     * Skip the sorting of matches.
+     * If the value is `true`, the matches are sorted according to {@link SiTypeaheadSorting}.
+     *
+     * @defaultValue false
+     */
+    typeaheadSkipSortingMatches = input(false, { transform: booleanAttribute });
+    /**
+     * Screen reader only label for the autocomplete list.
+     *
+     * @defaultValue
+     * ```
+     * $localize`:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`
+     * ```
+     */
+    typeaheadAutocompleteListLabel = input($localize `:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`);
+    /**
+     * If set, the typeahead will at minium have the width of the connected input field.
+     *
+     * @defaultValue false
+     */
+    typeaheadFullWidth = input(false, { transform: booleanAttribute });
+    /**
+     * Emits an Event when the input field is changed.
+     */
+    typeaheadOnInput = output();
+    /**
+     * Emits an Event when a typeahead match is selected.
+     * The event is a {@link TypeaheadMatch}
+     */
+    typeaheadOnSelect = output();
+    /** @deprecated Never emits. Use {@link typeaheadOpenChange} instead. */
+    typeaheadOnMultiselectClose = output();
+    /**
+     * Emits an Event when a typeahead full match exists. A full match occurs when the entered text
+     * is equal to one of the typeahead options.
+     * The event is a {@link TypeaheadMatch}
+     */
+    typeaheadOnFullMatch = output();
+    /** @deprecated Use {@link typeaheadOpenChange} instead. */
+    typeaheadClosed = output();
+    /** Emits whenever the typeahead overlay is opened or closed. */
+    typeaheadOpenChange = output();
+    /** @internal */
+    foundMatches = signal([]);
+    /** @internal */
+    query = signal('');
+    /**
+     * Indicates whether the typeahead is shown.
+     */
+    get typeaheadOpen() {
+        return !!this.componentRef;
+    }
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    injector = inject(Injector);
+    autoComplete = inject(SiAutocompleteDirective);
+    $typeahead = new ReplaySubject(1);
+    componentRef;
+    component;
+    inputTimer;
+    sourceSubscription;
+    subscription;
+    matchSorter = new SiTypeaheadSorting();
+    overlayRef;
+    // 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) {
+            this.sourceSubscription?.unsubscribe();
+            const typeahead = this.siTypeahead();
+            if (isObservable(typeahead)) {
+                this.sourceSubscription = typeahead.subscribe(this.$typeahead);
+            }
+            else {
+                this.$typeahead.next(typeahead);
+            }
+        }
+    }
+    // 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();
+    }
+    // Start the input timeout to display the typeahead when the host is focussed or a value is inputted into it.
+    onInput(event) {
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        // Get the value or otherwise textContent of the host element now, because later it could be reset.
+        const firstValue = target.value || target.textContent;
+        this.inputTimer ??= setTimeout(() => {
+            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.typeaheadWaitMs());
+    }
+    onKeydownEscape() {
+        if (this.typeaheadCloseOnEsc()) {
+            this.subscription?.unsubscribe();
+            this.clearTimer();
+            this.removeComponent();
+        }
+    }
+    onKeydownSpace(event) {
+        if (this.typeaheadMultiSelect()) {
+            // Avoid space character to be inserted into the input field
+            event.preventDefault();
+            const value = this.autoComplete.active?.value();
+            if (value) {
+                this.selectMatch(value);
+                // this forces change detection in the typeahead component.
+                this.foundMatches.update(matches => [...matches]);
+            }
+        }
+    }
+    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.
+    loadComponent() {
+        if (!this.overlayRef?.hasAttached()) {
+            this.overlayRef?.dispose();
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.elementRef.nativeElement)
+                    .withPositions(SiTypeaheadDirective.overlayPositions),
+                minWidth: this.typeaheadFullWidth()
+                    ? this.elementRef.nativeElement.getBoundingClientRect().width + 2 // 2px border
+                    : 0
+            });
+        }
+        if (this.overlayRef.hasAttached()) {
+            return;
+        }
+        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] ?? '');
+    }
+    // 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([]);
+        }
+    }
+    // Select a match, either gets called due to a enter keypress or from the component due to a click.
+    /** @internal */
+    selectMatch(match) {
+        match.itemSelected = !match.itemSelected;
+        if (!this.typeaheadMultiSelect()) {
+            const inputElement = this.elementRef.nativeElement.querySelector('input') ?? this.elementRef.nativeElement;
+            inputElement.value = this.typeaheadClearValueOnSelect() ? '' : match.text;
+            inputElement.dispatchEvent(new Event('input'));
+        }
+        // Clear the current input timeout (if set) and remove the typeahead.
+        this.clearTimer();
+        this.typeaheadOnSelect.emit(match);
+        if (!this.typeaheadMultiSelect()) {
+            this.removeComponent();
+        }
+    }
+    // Remove the component by clearing the viewContainerRef
+    removeComponent() {
+        if (this.overlayRef?.hasAttached()) {
+            this.overlayRef?.detach();
+            this.typeaheadClosed.emit();
+            this.typeaheadOpenChange.emit(false);
+        }
+        this.componentRef?.destroy();
+        this.componentRef = undefined;
+        this.component = undefined;
+    }
+    clearTimer() {
+        if (this.inputTimer) {
+            clearTimeout(this.inputTimer);
+            this.inputTimer = undefined;
+        }
+    }
+    escapeRegex(query) {
+        return query.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: SiTypeaheadDirective, isStandalone: true, selector: "[siTypeahead]", inputs: { siTypeahead: { classPropertyName: "siTypeahead", publicName: "siTypeahead", isSignal: true, isRequired: true, transformFunction: null }, typeaheadProcess: { classPropertyName: "typeaheadProcess", publicName: "typeaheadProcess", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollable: { classPropertyName: "typeaheadScrollable", publicName: "typeaheadScrollable", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsInScrollableView: { classPropertyName: "typeaheadOptionsInScrollableView", publicName: "typeaheadOptionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, typeaheadScrollableAdditionalHeight: { classPropertyName: "typeaheadScrollableAdditionalHeight", publicName: "typeaheadScrollableAdditionalHeight", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAutoSelectIndex: { classPropertyName: "typeaheadAutoSelectIndex", publicName: "typeaheadAutoSelectIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadCloseOnEsc: { classPropertyName: "typeaheadCloseOnEsc", publicName: "typeaheadCloseOnEsc", isSignal: true, isRequired: false, transformFunction: null }, typeaheadClearValueOnSelect: { classPropertyName: "typeaheadClearValueOnSelect", publicName: "typeaheadClearValueOnSelect", isSignal: true, isRequired: false, transformFunction: null }, typeaheadWaitMs: { classPropertyName: "typeaheadWaitMs", publicName: "typeaheadWaitMs", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMinLength: { classPropertyName: "typeaheadMinLength", publicName: "typeaheadMinLength", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionField: { classPropertyName: "typeaheadOptionField", publicName: "typeaheadOptionField", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMultiSelect: { classPropertyName: "typeaheadMultiSelect", publicName: "typeaheadMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, typeaheadTokenize: { classPropertyName: "typeaheadTokenize", publicName: "typeaheadTokenize", isSignal: true, isRequired: false, transformFunction: null }, typeaheadMatchAllTokens: { classPropertyName: "typeaheadMatchAllTokens", publicName: "typeaheadMatchAllTokens", isSignal: true, isRequired: false, transformFunction: null }, typeaheadItemTemplate: { classPropertyName: "typeaheadItemTemplate", publicName: "typeaheadItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, typeaheadSkipSortingMatches: { classPropertyName: "typeaheadSkipSortingMatches", publicName: "typeaheadSkipSortingMatches", isSignal: true, isRequired: false, transformFunction: null }, typeaheadAutocompleteListLabel: { classPropertyName: "typeaheadAutocompleteListLabel", publicName: "typeaheadAutocompleteListLabel", isSignal: true, isRequired: false, transformFunction: null }, typeaheadFullWidth: { classPropertyName: "typeaheadFullWidth", publicName: "typeaheadFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeaheadOnInput: "typeaheadOnInput", typeaheadOnSelect: "typeaheadOnSelect", typeaheadOnMultiselectClose: "typeaheadOnMultiselectClose", typeaheadOnFullMatch: "typeaheadOnFullMatch", typeaheadClosed: "typeaheadClosed", typeaheadOpenChange: "typeaheadOpenChange" }, host: { listeners: { "focusout": "onBlur()", "focusin": "onInput($event)", "input": "onInput($event)", "keydown.escape": "onKeydownEscape()", "keydown.space": "onKeydownSpace($event)" }, classAttribute: "si-typeahead" }, exportAs: ["si-typeahead"], usesOnChanges: true, hostDirectives: [{ directive: i1$1.SiAutocompleteDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siTypeahead]',
+                    exportAs: 'si-typeahead',
+                    hostDirectives: [SiAutocompleteDirective],
+                    host: {
+                        class: 'si-typeahead'
+                    }
+                }]
+        }], propDecorators: { onBlur: [{
+                type: HostListener,
+                args: ['focusout']
+            }], onInput: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], onKeydownEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }], onKeydownSpace: [{
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
+            }] } });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTypeaheadItemTemplateDirective {
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SiTypeaheadItemTemplateDirective, isStandalone: true, selector: "[siTypeaheadItemTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[siTypeaheadItemTemplate]'
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+class SiTypeaheadModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadModule, imports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective], exports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiTypeaheadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective],
+                    exports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective]
+                }]
+        }] });
+
+/**
+ * Copyright Siemens 2016 - 2025.
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SiTypeaheadDirective, SiTypeaheadItemTemplateDirective, SiTypeaheadModule };
+//# sourceMappingURL=siemens-element-ng-typeahead.mjs.map