@siemens/element-ng 49.16.0 → 51.0.0-rc.10

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

@@ -1,7 +1,7 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { Directive, inject, computed, viewChild, ElementRef, ChangeDetectionStrategy, Component, untracked, input, booleanAttribute, numberAttribute, output, signal, Injector, effect, NgModule } from '@angular/core';
+import { Directive, inject, computed, viewChild, ElementRef, Component, untracked, input, booleanAttribute, numberAttribute, output, signal, Injector, effect, NgModule } from '@angular/core';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
 import * as i1 from '@siemens/element-ng/autocomplete';
 import { SiAutocompleteDirective, SiAutocompleteListboxDirective, SiAutocompleteOptionDirective } from '@siemens/element-ng/autocomplete';
@@ -21,10 +21,10 @@ class SiTypeaheadItemTemplateDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SiTypeaheadItemTemplateDirective, isStandalone: true, selector: "[siTypeaheadItemTemplate]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siTypeaheadItemTemplate]'
@@ -39,11 +39,11 @@ class SiTypeaheadComponent {
     parent = inject(SiTypeaheadDirective);
     matches = computed(() => this.parent.typeaheadOptionsLimit()
         ? this.parent.foundMatches().slice(0, this.parent.typeaheadOptionsLimit())
-        : this.parent.foundMatches(), ...(ngDevMode ? [{ debugName: "matches" }] : []));
-    multiselect = computed(() => this.parent.typeaheadMultiSelect(), ...(ngDevMode ? [{ debugName: "multiselect" }] : []));
-    typeaheadElement = viewChild.required('typeahead', {
-        read: ElementRef
-    });
+        : this.parent.foundMatches(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []));
+    multiselect = computed(() => this.parent.typeaheadMultiSelect(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiselect" }] : /* istanbul ignore next */ []));
+    typeaheadElement = viewChild.required('typeahead', { ...(ngDevMode ? { debugName: "typeaheadElement" } : /* istanbul ignore next */ {}), read: ElementRef });
     autocompleteDirective = inject(SiAutocompleteDirective);
     ngAfterViewInit() {
         this.setHeight(this.typeaheadElement());
@@ -78,10 +78,10 @@ class SiTypeaheadComponent {
             this.parent.createOption();
         }
     }
-    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": "$event.preventDefault()" }, 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  [class.empty-loading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [siLoading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [initialDelay]=\"false\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  @if (parent.typeaheadLoading() && matches().length) {\n    <li class=\"dropdown-item\" [siLoading]=\"true\" [initialDelay]=\"false\"></li>\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: [":host{--loading-spinner-size: 24px}.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%}.dropdown-menu.empty-loading{min-block-size:176px}.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: "directive", type: SiLoadingSpinnerDirective, selector: "[siLoading]", inputs: ["siLoading", "blocking", "initialDelay"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiTypeaheadComponent, isStandalone: true, selector: "si-typeahead", host: { listeners: { "mousedown": "$event.preventDefault()" }, 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  [class.empty-loading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [siLoading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [initialDelay]=\"false\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  @if (parent.typeaheadLoading() && matches().length) {\n    <li class=\"dropdown-item\" [siLoading]=\"true\" [initialDelay]=\"false\"></li>\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: [":host{--loading-spinner-size: 24px}.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%}.dropdown-menu.empty-loading{min-block-size:176px}.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: "directive", type: SiLoadingSpinnerDirective, selector: "[siLoading]", inputs: ["siLoading", "blocking", "initialDelay"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-typeahead', imports: [
                         SiAutocompleteListboxDirective,
@@ -91,7 +91,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiTranslatePipe,
                         SiTypeaheadItemTemplateDirective,
                         SiLoadingSpinnerDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'w-100', '(mousedown)': '$event.preventDefault()' }, 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  [class.empty-loading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [siLoading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [initialDelay]=\"false\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  @if (parent.typeaheadLoading() && matches().length) {\n    <li class=\"dropdown-item\" [siLoading]=\"true\" [initialDelay]=\"false\"></li>\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: [":host{--loading-spinner-size: 24px}.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%}.dropdown-menu.empty-loading{min-block-size:176px}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"] }]
+                    ], host: { class: 'w-100', '(mousedown)': '$event.preventDefault()' }, 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  [class.empty-loading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [siLoading]=\"parent.typeaheadLoading() && matches().length === 0\"\n  [initialDelay]=\"false\"\n  [siAutocompleteListboxFor]=\"autocompleteDirective\"\n  [siAutocompleteDefaultIndex]=\"parent.typeaheadAutoSelectIndex()\"\n  [attr.aria-label]=\"parent.typeaheadAutocompleteListLabel() | translate\"\n  (siAutocompleteOptionSubmitted)=\"selectMatch($event)\"\n>\n  @if (parent.typeaheadLoading() && matches().length) {\n    <li class=\"dropdown-item\" [siLoading]=\"true\" [initialDelay]=\"false\"></li>\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: [":host{--loading-spinner-size: 24px}.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%}.dropdown-menu.empty-loading{min-block-size:176px}.typeahead-match-segment-matching{font-weight:600}.dropdown-item *{flex-shrink:0}.dropdown-item span{white-space:pre-wrap}\n"] }]
         }], propDecorators: { typeaheadElement: [{ type: i0.ViewChild, args: ['typeahead', { ...{
                             read: ElementRef
                         }, isSignal: true }] }] } });
@@ -123,7 +123,8 @@ class TypeaheadSearch {
     datasource;
     query;
     options;
-    matches = computed(() => this.search(this.datasource(), this.readQuery()), ...(ngDevMode ? [{ debugName: "matches" }] : []));
+    matches = computed(() => this.search(this.datasource(), this.readQuery()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "matches" }] : /* istanbul ignore next */ []));
     constructor(datasource, query, options) {
         this.datasource = datasource;
         this.query = query;
@@ -368,90 +369,97 @@ class SiTypeaheadDirective {
      * Has to be either an Array or an Observable of an Array
      * of options (string or object)
      */
-    siTypeahead = input.required(...(ngDevMode ? [{ debugName: "siTypeahead" }] : []));
+    siTypeahead = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siTypeahead" }] : /* istanbul ignore next */ []));
     /**
      * 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, { ...(ngDevMode ? { debugName: "typeaheadProcess" } : {}), transform: booleanAttribute });
+    typeaheadProcess = input(true, { ...(ngDevMode ? { debugName: "typeaheadProcess" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Makes the typeahead scrollable and sets its height.
      * Uses {@link typeaheadOptionsInScrollableView} and {@link typeaheadScrollableAdditionalHeight}.
      *
      * @defaultValue false
      */
-    typeaheadScrollable = input(false, { ...(ngDevMode ? { debugName: "typeaheadScrollable" } : {}), transform: booleanAttribute });
+    typeaheadScrollable = input(false, { ...(ngDevMode ? { debugName: "typeaheadScrollable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * If {@link typeaheadScrollable} is `true`, defines the number of items visible at once.
      *
      * @defaultValue 10
      */
-    typeaheadOptionsInScrollableView = input(10, ...(ngDevMode ? [{ debugName: "typeaheadOptionsInScrollableView" }] : []));
+    typeaheadOptionsInScrollableView = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadOptionsInScrollableView" }] : /* istanbul ignore next */ []));
     /**
      * Defines the maximum number of items added into the DOM. Default is 20 and 0 means unlimited.
      *
      * @defaultValue 20
      */
-    typeaheadOptionsLimit = input(20, ...(ngDevMode ? [{ debugName: "typeaheadOptionsLimit" }] : []));
+    typeaheadOptionsLimit = input(20, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadOptionsLimit" }] : /* istanbul ignore next */ []));
     /**
      * 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, ...(ngDevMode ? [{ debugName: "typeaheadScrollableAdditionalHeight" }] : []));
+    typeaheadScrollableAdditionalHeight = input(13, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadScrollableAdditionalHeight" }] : /* istanbul ignore next */ []));
     /**
      * Defines the index of the item which should automatically be selected.
      *
      * @defaultValue 0
      */
-    typeaheadAutoSelectIndex = input(0, { ...(ngDevMode ? { debugName: "typeaheadAutoSelectIndex" } : {}), transform: numberAttribute });
+    typeaheadAutoSelectIndex = input(0, { ...(ngDevMode ? { debugName: "typeaheadAutoSelectIndex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /**
      * Defines whether the typeahead can be closed using escape.
      *
      * @defaultValue true
      */
-    typeaheadCloseOnEsc = input(true, { ...(ngDevMode ? { debugName: "typeaheadCloseOnEsc" } : {}), transform: booleanAttribute });
+    typeaheadCloseOnEsc = input(true, { ...(ngDevMode ? { debugName: "typeaheadCloseOnEsc" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Defines whether the host value should be cleared when a value is selected.
      *
      * @defaultValue false
      */
-    typeaheadClearValueOnSelect = input(false, { ...(ngDevMode ? { debugName: "typeaheadClearValueOnSelect" } : {}), transform: booleanAttribute });
+    typeaheadClearValueOnSelect = input(false, { ...(ngDevMode ? { debugName: "typeaheadClearValueOnSelect" } : /* istanbul ignore next */ {}), 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, ...(ngDevMode ? [{ debugName: "typeaheadWaitMs" }] : []));
+    typeaheadWaitMs = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadWaitMs" }] : /* istanbul ignore next */ []));
     /**
      * 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, ...(ngDevMode ? [{ debugName: "typeaheadMinLength" }] : []));
+    typeaheadMinLength = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadMinLength" }] : /* istanbul ignore next */ []));
     /**
      * Defines the name of the field/property the option string is in when the typeahead options are objects.
      *
      * @defaultValue 'name'
      */
-    typeaheadOptionField = input('name', ...(ngDevMode ? [{ debugName: "typeaheadOptionField" }] : []));
+    typeaheadOptionField = input('name', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadOptionField" }] : /* istanbul ignore next */ []));
     /**
      * Defines whether multiselection of typeahead is possible with checkboxes.
      *
      * @defaultValue false
      */
-    typeaheadMultiSelect = input(false, { ...(ngDevMode ? { debugName: "typeaheadMultiSelect" } : {}), transform: booleanAttribute });
+    typeaheadMultiSelect = input(false, { ...(ngDevMode ? { debugName: "typeaheadMultiSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Defines whether to tokenize the search or match the whole search.
      *
      * @defaultValue true
      */
-    typeaheadTokenize = input(true, { ...(ngDevMode ? { debugName: "typeaheadTokenize" } : {}), transform: booleanAttribute });
+    typeaheadTokenize = input(true, { ...(ngDevMode ? { debugName: "typeaheadTokenize" } : /* istanbul ignore next */ {}), 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.
@@ -462,19 +470,21 @@ class SiTypeaheadDirective {
      *
      * @defaultValue 'separately'
      */
-    typeaheadMatchAllTokens = input('separately', ...(ngDevMode ? [{ debugName: "typeaheadMatchAllTokens" }] : []));
+    typeaheadMatchAllTokens = input('separately', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadMatchAllTokens" }] : /* istanbul ignore next */ []));
     /**
      * 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(...(ngDevMode ? [undefined, { debugName: "typeaheadItemTemplate" }] : []));
+    typeaheadItemTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "typeaheadItemTemplate" }] : /* istanbul ignore next */ []));
     /**
      * Skip the sorting of matches.
      * If the value is `true`, the matches are sorted according to {@link SiTypeaheadSorting}.
      *
      * @defaultValue false
      */
-    typeaheadSkipSortingMatches = input(false, { ...(ngDevMode ? { debugName: "typeaheadSkipSortingMatches" } : {}), transform: booleanAttribute });
+    typeaheadSkipSortingMatches = input(false, { ...(ngDevMode ? { debugName: "typeaheadSkipSortingMatches" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Screen reader only label for the autocomplete list.
      *
@@ -483,19 +493,21 @@ class SiTypeaheadDirective {
      * t(() => $localize`:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`)
      * ```
      */
-    typeaheadAutocompleteListLabel = input(t(() => $localize `:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`), ...(ngDevMode ? [{ debugName: "typeaheadAutocompleteListLabel" }] : []));
+    typeaheadAutocompleteListLabel = input(t(() => $localize `:@@SI_TYPEAHEAD.AUTOCOMPLETE_LIST_LABEL:Suggestions`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadAutocompleteListLabel" }] : /* istanbul ignore next */ []));
     /**
      * If set, the typeahead will at minium have the width of the connected input field.
      *
      * @defaultValue false
      */
-    typeaheadFullWidth = input(false, { ...(ngDevMode ? { debugName: "typeaheadFullWidth" } : {}), transform: booleanAttribute });
+    typeaheadFullWidth = input(false, { ...(ngDevMode ? { debugName: "typeaheadFullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * CDK scroll strategy used for the typeahead overlay.
      *
      * @defaultValue defaultConnectedOverlayScrollStrategy()
      */
-    typeaheadScrollStrategy = input(defaultConnectedOverlayScrollStrategy(), ...(ngDevMode ? [{ debugName: "typeaheadScrollStrategy" }] : []));
+    typeaheadScrollStrategy = input(defaultConnectedOverlayScrollStrategy(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadScrollStrategy" }] : /* istanbul ignore next */ []));
     /**
      * This option will be shown at the end of the typeahead.
      * Use it to allow users to create new options on the fly.
@@ -504,7 +516,8 @@ class SiTypeaheadDirective {
      *
      * @experimental
      */
-    typeaheadCreateOption = input(...(ngDevMode ? [undefined, { debugName: "typeaheadCreateOption" }] : []));
+    typeaheadCreateOption = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "typeaheadCreateOption" }] : /* istanbul ignore next */ []));
     /**
      * Emits an Event when the input field is changed.
      */
@@ -530,9 +543,11 @@ class SiTypeaheadDirective {
      */
     typeaheadOnCreateOption = output();
     /** @internal */
-    foundMatches = computed(() => this.typeaheadProcess() ? this.processedSearch() : this.unprocessedSearch(), ...(ngDevMode ? [{ debugName: "foundMatches" }] : []));
+    foundMatches = computed(() => this.typeaheadProcess() ? this.processedSearch() : this.unprocessedSearch(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "foundMatches" }] : /* istanbul ignore next */ []));
     /** @internal */
-    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
     /**
      * Indicates whether the typeahead is shown.
      */
@@ -557,15 +572,18 @@ class SiTypeaheadDirective {
      * @internal
      * @defaultValue false
      */
-    typeaheadLoading = signal(false, ...(ngDevMode ? [{ debugName: "typeaheadLoading" }] : []));
+    typeaheadLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeaheadLoading" }] : /* istanbul ignore next */ []));
     /**
      * 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, ...(ngDevMode ? [{ debugName: "canBeOpen" }] : []));
-    selectionCounter = signal(0, ...(ngDevMode ? [{ debugName: "selectionCounter" }] : []));
+    canBeOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canBeOpen" }] : /* istanbul ignore next */ []));
+    selectionCounter = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionCounter" }] : /* istanbul ignore next */ []));
     typeaheadOptions = toSignal(this.$typeahead.pipe(map(options => options.map(option => ({
         text: this.getOptionValue(option),
         option
@@ -591,7 +609,8 @@ class SiTypeaheadDirective {
         else {
             return this.matchSorter.sortMatches(matches);
         }
-    }, ...(ngDevMode ? [{ debugName: "processedSearch" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "processedSearch" }] : /* istanbul ignore next */ []));
     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 => {
@@ -617,7 +636,8 @@ class SiTypeaheadDirective {
                 active: false
             };
         });
-    }, ...(ngDevMode ? [{ debugName: "unprocessedSearch" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unprocessedSearch" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             // The value needs to fulfil the minimum length requirement set.
@@ -817,10 +837,10 @@ class SiTypeaheadDirective {
     escapeRegex(query) {
         return query.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
     }
-    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 }, typeaheadScrollStrategy: { classPropertyName: "typeaheadScrollStrategy", publicName: "typeaheadScrollStrategy", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.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 }, typeaheadScrollStrategy: { classPropertyName: "typeaheadScrollStrategy", publicName: "typeaheadScrollStrategy", 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: "21.0.8", ngImport: i0, type: SiTypeaheadDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[siTypeahead]',
@@ -841,11 +861,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadModule, imports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective], exports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiTypeaheadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiTypeaheadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiTypeaheadDirective, SiTypeaheadItemTemplateDirective],