@siemens/element-ng 48.10.0 → 49.0.0-rc.2

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

@@ -19,10 +19,10 @@ 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiTypeaheadItemTemplateDirective, isStandalone: true, selector: "[siTypeaheadItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siTypeaheadItemTemplate]'
@@ -37,8 +37,8 @@ class SiTypeaheadComponent {
     parent = inject(SiTypeaheadDirective);
     matches = computed(() => this.parent.typeaheadOptionsLimit()
         ? this.parent.foundMatches().slice(0, this.parent.typeaheadOptionsLimit())
-        : this.parent.foundMatches());
-    multiselect = computed(() => this.parent.typeaheadMultiSelect());
+        : this.parent.foundMatches(), ...(ngDevMode ? [{ debugName: "matches" }] : []));
+    multiselect = computed(() => this.parent.typeaheadMultiSelect(), ...(ngDevMode ? [{ debugName: "multiselect" }] : []));
     typeaheadElement = viewChild.required('typeahead', {
         read: ElementRef
     });
@@ -79,10 +79,10 @@ class SiTypeaheadComponent {
             this.parent.createOption();
         }
     }
-    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\" 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@let createOption = parent.typeaheadCreateOption();\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  (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  @if (createOption && parent.query().length) {\n    <li class=\"dropdown-item\" [siAutocompleteOption]=\"undefined\">\n      {{ createOption | translate: { query: parent.query() } }}\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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@let createOption = parent.typeaheadCreateOption();\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  (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  @if (createOption && parent.query().length) {\n    <li class=\"dropdown-item\" [siAutocompleteOption]=\"undefined\">\n      {{ createOption | translate: { query: parent.query() } }}\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: "directive", type: SiTypeaheadItemTemplateDirective, selector: "[siTypeaheadItemTemplate]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-typeahead', imports: [
                         SiAutocompleteListboxDirective,
@@ -92,7 +92,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         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@let createOption = parent.typeaheadCreateOption();\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  (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  @if (createOption && parent.query().length) {\n    <li class=\"dropdown-item\" [siAutocompleteOption]=\"undefined\">\n      {{ createOption | translate: { query: parent.query() } }}\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: [{
+        }], propDecorators: { typeaheadElement: [{ type: i0.ViewChild, args: ['typeahead', { ...{
+                            read: ElementRef
+                        }, isSignal: true }] }], onMouseDown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
             }] } });
@@ -124,7 +126,7 @@ class TypeaheadSearch {
     datasource;
     query;
     options;
-    matches = computed(() => this.search(this.datasource(), this.query()));
+    matches = computed(() => this.search(this.datasource(), this.query()), ...(ngDevMode ? [{ debugName: "matches" }] : []));
     constructor(datasource, query, options) {
         this.datasource = datasource;
         this.query = query;
@@ -361,92 +363,90 @@ class SiTypeaheadDirective {
      * Has to be either an Array or an Observable of an Array
      * of options (string or object)
      */
-    siTypeahead = input.required();
+    siTypeahead = input.required(...(ngDevMode ? [{ debugName: "siTypeahead" }] : []));
     /**
      * 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
-    });
+    typeaheadProcess = input(true, { ...(ngDevMode ? { debugName: "typeaheadProcess" } : {}), transform: booleanAttribute });
     /**
      * Makes the typeahead scrollable and sets its height.
      * Uses {@link typeaheadOptionsInScrollableView} and {@link typeaheadScrollableAdditionalHeight}.
      *
      * @defaultValue false
      */
-    typeaheadScrollable = input(false, { transform: booleanAttribute });
+    typeaheadScrollable = input(false, { ...(ngDevMode ? { debugName: "typeaheadScrollable" } : {}), transform: booleanAttribute });
     /**
      * If {@link typeaheadScrollable} is `true`, defines the number of items visible at once.
      *
      * @defaultValue 10
      */
-    typeaheadOptionsInScrollableView = input(10);
+    typeaheadOptionsInScrollableView = input(10, ...(ngDevMode ? [{ debugName: "typeaheadOptionsInScrollableView" }] : []));
     /**
      * Defines the maximum number of items added into the DOM. Default is 20 and 0 means unlimited.
      *
      * @defaultValue 20
      */
-    typeaheadOptionsLimit = input(20);
+    typeaheadOptionsLimit = input(20, ...(ngDevMode ? [{ debugName: "typeaheadOptionsLimit" }] : []));
     /**
      * 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);
+    typeaheadScrollableAdditionalHeight = input(13, ...(ngDevMode ? [{ debugName: "typeaheadScrollableAdditionalHeight" }] : []));
     /**
      * Defines the index of the item which should automatically be selected.
      *
      * @defaultValue 0
      */
-    typeaheadAutoSelectIndex = input(0, { transform: numberAttribute });
+    typeaheadAutoSelectIndex = input(0, { ...(ngDevMode ? { debugName: "typeaheadAutoSelectIndex" } : {}), transform: numberAttribute });
     /**
      * Defines whether the typeahead can be closed using escape.
      *
      * @defaultValue true
      */
-    typeaheadCloseOnEsc = input(true, { transform: booleanAttribute });
+    typeaheadCloseOnEsc = input(true, { ...(ngDevMode ? { debugName: "typeaheadCloseOnEsc" } : {}), transform: booleanAttribute });
     /**
      * Defines whether the host value should be cleared when a value is selected.
      *
      * @defaultValue false
      */
-    typeaheadClearValueOnSelect = input(false, { transform: booleanAttribute });
+    typeaheadClearValueOnSelect = input(false, { ...(ngDevMode ? { debugName: "typeaheadClearValueOnSelect" } : {}), 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);
+    typeaheadWaitMs = input(0, ...(ngDevMode ? [{ debugName: "typeaheadWaitMs" }] : []));
     /**
      * 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);
+    typeaheadMinLength = input(1, ...(ngDevMode ? [{ debugName: "typeaheadMinLength" }] : []));
     /**
      * Defines the name of the field/property the option string is in when the typeahead options are objects.
      *
      * @defaultValue 'name'
      */
-    typeaheadOptionField = input('name');
+    typeaheadOptionField = input('name', ...(ngDevMode ? [{ debugName: "typeaheadOptionField" }] : []));
     /**
      * Defines whether multiselection of typeahead is possible with checkboxes.
      *
      * @defaultValue false
      */
-    typeaheadMultiSelect = input(false, { transform: booleanAttribute });
+    typeaheadMultiSelect = input(false, { ...(ngDevMode ? { debugName: "typeaheadMultiSelect" } : {}), transform: booleanAttribute });
     /**
      * Defines whether to tokenize the search or match the whole search.
      *
      * @defaultValue true
      */
-    typeaheadTokenize = input(true, { transform: booleanAttribute });
+    typeaheadTokenize = input(true, { ...(ngDevMode ? { debugName: "typeaheadTokenize" } : {}), 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.
@@ -457,19 +457,19 @@ class SiTypeaheadDirective {
      *
      * @defaultValue 'separately'
      */
-    typeaheadMatchAllTokens = input('separately');
+    typeaheadMatchAllTokens = input('separately', ...(ngDevMode ? [{ debugName: "typeaheadMatchAllTokens" }] : []));
     /**
      * 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();
+    typeaheadItemTemplate = input(...(ngDevMode ? [undefined, { debugName: "typeaheadItemTemplate" }] : []));
     /**
      * 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 });
+    typeaheadSkipSortingMatches = input(false, { ...(ngDevMode ? { debugName: "typeaheadSkipSortingMatches" } : {}), transform: booleanAttribute });
     /**
      * Screen reader only label for the autocomplete list.
      *
@@ -478,13 +478,13 @@ class SiTypeaheadDirective {
      * t(() => $localize`:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`)
      * ```
      */
-    typeaheadAutocompleteListLabel = input(t(() => $localize `:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`));
+    typeaheadAutocompleteListLabel = input(t(() => $localize `:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`), ...(ngDevMode ? [{ debugName: "typeaheadAutocompleteListLabel" }] : []));
     /**
      * If set, the typeahead will at minium have the width of the connected input field.
      *
      * @defaultValue false
      */
-    typeaheadFullWidth = input(false, { transform: booleanAttribute });
+    typeaheadFullWidth = input(false, { ...(ngDevMode ? { debugName: "typeaheadFullWidth" } : {}), transform: booleanAttribute });
     /**
      * This option will be shown at the end of the typeahead.
      * Use it to allow users to create new options on the fly.
@@ -493,7 +493,7 @@ class SiTypeaheadDirective {
      *
      * @experimental
      */
-    typeaheadCreateOption = input();
+    typeaheadCreateOption = input(...(ngDevMode ? [undefined, { debugName: "typeaheadCreateOption" }] : []));
     /**
      * Emits an Event when the input field is changed.
      */
@@ -519,9 +519,9 @@ class SiTypeaheadDirective {
      */
     typeaheadOnCreateOption = output();
     /** @internal */
-    foundMatches = computed(() => this.typeaheadProcess() ? this.processedSearch() : this.unprocessedSearch());
+    foundMatches = computed(() => this.typeaheadProcess() ? this.processedSearch() : this.unprocessedSearch(), ...(ngDevMode ? [{ debugName: "foundMatches" }] : []));
     /** @internal */
-    query = signal('');
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
     /**
      * Indicates whether the typeahead is shown.
      */
@@ -531,7 +531,6 @@ class SiTypeaheadDirective {
     overlay = inject(Overlay);
     elementRef = inject(ElementRef);
     injector = inject(Injector);
-    autoComplete = inject(SiAutocompleteDirective);
     $typeahead = new ReplaySubject(1);
     componentRef;
     inputTimer;
@@ -544,8 +543,8 @@ class SiTypeaheadDirective {
      * It may be overridden and set to `false` when escape is pressed
      * or when an option was selected.
      */
-    canBeOpen = signal(false);
-    selectionCounter = signal(0);
+    canBeOpen = signal(false, ...(ngDevMode ? [{ debugName: "canBeOpen" }] : []));
+    selectionCounter = signal(0, ...(ngDevMode ? [{ debugName: "selectionCounter" }] : []));
     typeaheadOptions = toSignal(this.$typeahead.pipe(map(options => options.map(option => ({
         text: this.getOptionValue(option),
         option
@@ -570,7 +569,7 @@ class SiTypeaheadDirective {
         else {
             return this.matchSorter.sortMatches(matches);
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "processedSearch" }] : []));
     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 => {
@@ -596,7 +595,7 @@ class SiTypeaheadDirective {
                 active: false
             };
         });
-    });
+    }, ...(ngDevMode ? [{ debugName: "unprocessedSearch" }] : []));
     constructor() {
         effect(() => {
             // The value needs to fulfil the minimum length requirement set.
@@ -662,18 +661,6 @@ class SiTypeaheadDirective {
             this.canBeOpen.set(false);
         }
     }
-    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.selectionCounter.update(v => v + 1);
-            }
-        }
-    }
     ngOnDestroy() {
         this.clearTimer();
         this.sourceSubscription?.unsubscribe();
@@ -774,10 +761,10 @@ class SiTypeaheadDirective {
     escapeRegex(query) {
         return query.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.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 }, typeaheadCreateOption: { classPropertyName: "typeaheadCreateOption", publicName: "typeaheadCreateOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeaheadOnInput: "typeaheadOnInput", typeaheadOnSelect: "typeaheadOnSelect", typeaheadOnFullMatch: "typeaheadOnFullMatch", typeaheadOpenChange: "typeaheadOpenChange", typeaheadOnCreateOption: "typeaheadOnCreateOption" }, 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.SiAutocompleteDirective }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", 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 }, typeaheadCreateOption: { classPropertyName: "typeaheadCreateOption", publicName: "typeaheadCreateOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { typeaheadOnInput: "typeaheadOnInput", typeaheadOnSelect: "typeaheadOnSelect", typeaheadOnFullMatch: "typeaheadOnFullMatch", typeaheadOpenChange: "typeaheadOpenChange", typeaheadOnCreateOption: "typeaheadOnCreateOption" }, host: { listeners: { "focusout": "onBlur()", "focusin": "onInput($event)", "input": "onInput($event)", "keydown.escape": "onKeydownEscape()" }, classAttribute: "si-typeahead" }, exportAs: ["si-typeahead"], usesOnChanges: true, hostDirectives: [{ directive: i1.SiAutocompleteDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siTypeahead]',
@@ -787,7 +774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     hostDirectives: [SiAutocompleteDirective],
                     exportAs: 'si-typeahead'
                 }]
-        }], ctorParameters: () => [], propDecorators: { onBlur: [{
+        }], ctorParameters: () => [], propDecorators: { siTypeahead: [{ type: i0.Input, args: [{ isSignal: true, alias: "siTypeahead", required: true }] }], typeaheadProcess: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadProcess", required: false }] }], typeaheadScrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadScrollable", required: false }] }], typeaheadOptionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionsInScrollableView", required: false }] }], typeaheadOptionsLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionsLimit", required: false }] }], typeaheadScrollableAdditionalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadScrollableAdditionalHeight", required: false }] }], typeaheadAutoSelectIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadAutoSelectIndex", required: false }] }], typeaheadCloseOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadCloseOnEsc", required: false }] }], typeaheadClearValueOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadClearValueOnSelect", required: false }] }], typeaheadWaitMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadWaitMs", required: false }] }], typeaheadMinLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadMinLength", required: false }] }], typeaheadOptionField: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionField", required: false }] }], typeaheadMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadMultiSelect", required: false }] }], typeaheadTokenize: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadTokenize", required: false }] }], typeaheadMatchAllTokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadMatchAllTokens", required: false }] }], typeaheadItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadItemTemplate", required: false }] }], typeaheadSkipSortingMatches: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadSkipSortingMatches", required: false }] }], typeaheadAutocompleteListLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadAutocompleteListLabel", required: false }] }], typeaheadFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadFullWidth", required: false }] }], typeaheadCreateOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadCreateOption", required: false }] }], typeaheadOnInput: [{ type: i0.Output, args: ["typeaheadOnInput"] }], typeaheadOnSelect: [{ type: i0.Output, args: ["typeaheadOnSelect"] }], typeaheadOnFullMatch: [{ type: i0.Output, args: ["typeaheadOnFullMatch"] }], typeaheadOpenChange: [{ type: i0.Output, args: ["typeaheadOpenChange"] }], typeaheadOnCreateOption: [{ type: i0.Output, args: ["typeaheadOnCreateOption"] }], onBlur: [{
                 type: HostListener,
                 args: ['focusout']
             }], onInput: [{
@@ -799,9 +786,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             }], onKeydownEscape: [{
                 type: HostListener,
                 args: ['keydown.escape']
-            }], onKeydownSpace: [{
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
             }] } });
 
 /**
@@ -809,11 +793,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiTypeaheadModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadModule, imports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective], exports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadModule, imports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective], exports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiTypeaheadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective],