@siemens/element-ng 48.0.0-next.2 → 48.0.0-next.3

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { viewChild, signal, input, numberAttribute, booleanAttribute, output, computed, HostListener, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { addIcons, elementSearch, elementCancel, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { addIcons, elementSearch, elementCancel, SiIconComponent } from '@siemens/element-ng/icon';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
@@ -148,11 +148,11 @@ class SiSearchBarComponent {
                 useExisting: SiSearchBarComponent,
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon-next class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.ps-9]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      aria-label=\"clear\"\n      class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [":host{--search-bar-icon-color: var(--element-text-secondary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1)}:host div:hover .search-bar-icon,:host div:hover ::placeholder,:host div.focus .search-bar-icon,:host div.focus ::placeholder{color:var(--element-text-primary)!important}.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4)}input{transition:none;background-color:var(--input-background-color);border-radius:4px;border-width:0}input.form-control:focus-visible{background-color:var(--input-background-color)}.cancel-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}.is-invalid~.cancel-button{color:var(--element-status-danger)}.search-bar-icon{position:absolute;inset-block-start:4px;inset-inline-start:4px;color:var(--search-bar-icon-color);line-height:1}.icon-end{padding-inline-end:1.5rem}::placeholder{color:var(--element-text-secondary);padding-inline-start:2px}.disabled .search-bar-icon,.disabled input,.disabled .cancel-button,.disabled ::placeholder{color:var(--element-text-disabled)}.disabled input{background-color:var(--input-background-color)}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.ps-9]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      aria-label=\"clear\"\n      class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [":host{--search-bar-icon-color: var(--element-text-secondary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1)}:host div:hover .search-bar-icon,:host div:hover ::placeholder,:host div.focus .search-bar-icon,:host div.focus ::placeholder{color:var(--element-text-primary)!important}.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4)}input{transition:none;background-color:var(--input-background-color);border-radius:4px;border-width:0}input.form-control:focus-visible{background-color:var(--input-background-color)}.cancel-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}.is-invalid~.cancel-button{color:var(--element-status-danger)}.search-bar-icon{position:absolute;inset-block-start:4px;inset-inline-start:4px;color:var(--search-bar-icon-color);line-height:1}.icon-end{padding-inline-end:1.5rem}::placeholder{color:var(--element-text-secondary);padding-inline-start:2px}.disabled .search-bar-icon,.disabled input,.disabled .cancel-button,.disabled ::placeholder{color:var(--element-text-disabled)}.disabled input{background-color:var(--input-background-color)}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-search-bar', imports: [SiIconNextComponent], providers: [
+            args: [{ selector: 'si-search-bar', imports: [SiIconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: SiSearchBarComponent,
@@ -160,7 +160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.readonly]': 'readonly()'
-                    }, template: "<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon-next class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.ps-9]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      aria-label=\"clear\"\n      class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [":host{--search-bar-icon-color: var(--element-text-secondary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1)}:host div:hover .search-bar-icon,:host div:hover ::placeholder,:host div.focus .search-bar-icon,:host div.focus ::placeholder{color:var(--element-text-primary)!important}.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4)}input{transition:none;background-color:var(--input-background-color);border-radius:4px;border-width:0}input.form-control:focus-visible{background-color:var(--input-background-color)}.cancel-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}.is-invalid~.cancel-button{color:var(--element-status-danger)}.search-bar-icon{position:absolute;inset-block-start:4px;inset-inline-start:4px;color:var(--search-bar-icon-color);line-height:1}.icon-end{padding-inline-end:1.5rem}::placeholder{color:var(--element-text-secondary);padding-inline-start:2px}.disabled .search-bar-icon,.disabled input,.disabled .cancel-button,.disabled ::placeholder{color:var(--element-text-disabled)}.disabled input{background-color:var(--input-background-color)}\n"] }]
+                    }, template: "<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.ps-9]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      aria-label=\"clear\"\n      class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n", styles: [":host{--search-bar-icon-color: var(--element-text-secondary);--input-background-color: var(--element-base-1);--input-background-hover-color: var(--element-base-1)}:host div:hover .search-bar-icon,:host div:hover ::placeholder,:host div.focus .search-bar-icon,:host div.focus ::placeholder{color:var(--element-text-primary)!important}.dark-background{--input-background-color: var(--element-base-0);--input-background-hover-color: var(--element-ui-4)}input{transition:none;background-color:var(--input-background-color);border-radius:4px;border-width:0}input.form-control:focus-visible{background-color:var(--input-background-color)}.cancel-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}.is-invalid~.cancel-button{color:var(--element-status-danger)}.search-bar-icon{position:absolute;inset-block-start:4px;inset-inline-start:4px;color:var(--search-bar-icon-color);line-height:1}.icon-end{padding-inline-end:1.5rem}::placeholder{color:var(--element-text-secondary);padding-inline-start:2px}.disabled .search-bar-icon,.disabled input,.disabled .cancel-button,.disabled ::placeholder{color:var(--element-text-disabled)}.disabled input{background-color:var(--input-background-color)}\n"] }]
         }], propDecorators: { focus: [{
                 type: HostListener,
                 args: ['focus']

package/fesm2022/siemens-element-ng-search-bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-search-bar.mjs","sources":["../../../../projects/element-ng/search-bar/si-search-bar.component.ts","../../../../projects/element-ng/search-bar/si-search-bar.component.html","../../../../projects/element-ng/search-bar/si-search-bar.module.ts","../../../../projects/element-ng/search-bar/index.ts","../../../../projects/element-ng/search-bar/siemens-element-ng-search-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  HostListener,\n  input,\n  numberAttribute,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BackgroundColorVariant } from '@siemens/element-ng/common';\nimport {\n  elementCancel,\n  elementSearch,\n  addIcons,\n  SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n@Component({\n  selector: 'si-search-bar',\n  imports: [SiIconNextComponent],\n  templateUrl: './si-search-bar.component.html',\n  styleUrl: './si-search-bar.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiSearchBarComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.readonly]': 'readonly()'\n  }\n})\nexport class SiSearchBarComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {\n  private readonly inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inputRef');\n  private debouncer = new Subject<string>();\n  private readonly disabledNgControl = signal(false);\n\n  /**\n   * Time unit change of search input takes effect.\n   *\n   * @defaultValue 400\n   */\n  readonly debounceTime = input(400, { transform: numberAttribute });\n  /**\n   * Prohibited characters restricting search.\n   */\n  readonly prohibitedCharacters = input<string>();\n  /**\n   * Define search input placeholder.\n   *\n   * @defaultValue ''\n   */\n  readonly placeholder = input('');\n  /**\n   * Display search icon before search input.\n   *\n   * @defaultValue false\n   */\n  readonly showIcon = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the search is tabbable or not.\n   *\n   * @defaultValue true\n   */\n  readonly tabbable = input(true, { transform: booleanAttribute });\n\n  /**\n   * Define search input content.\n   */\n  readonly value = input<string>();\n\n  /** @defaultValue false */\n  readonly readonly = input(false, { transform: booleanAttribute });\n  /**\n   * Color to use for component background\n   *\n   * @defaultValue 'base-1'\n   */\n  readonly colorVariant = input<BackgroundColorVariant>('base-1');\n\n  /** @defaultValue false */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n  /**\n   * Output callback event will provide you with search term if search input changes.\n   */\n  readonly searchChange = output<string>();\n\n  protected isInvalid = false;\n  protected inFocus = false;\n\n  protected onChange = (val: any): void => {};\n  protected onTouch = (): void => {};\n\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n\n  protected readonly searchValue = signal('');\n  protected readonly icons = addIcons({ elementCancel, elementSearch });\n\n  /** @internal */\n  writeValue(value: string): void {\n    this.writeSearchValue(value ?? '');\n  }\n\n  /** @internal */\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  /** @internal */\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  /** @internal */\n  setDisabledState(disabled: boolean): void {\n    this.disabledNgControl.set(disabled);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.value) {\n      this.writeSearchValue(changes.value.currentValue);\n    }\n  }\n\n  ngOnInit(): void {\n    this.debouncer.pipe(debounceTime(this.debounceTime())).subscribe(value => {\n      this.setSearch(value);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.debouncer.complete();\n  }\n\n  private setSearch(value?: string): void {\n    value ??= '';\n    if (value !== this.searchValue()) {\n      this.searchValue.set(value);\n      this.inputRef().nativeElement.value = value;\n      this.onChange(value);\n      this.searchChange.emit(value);\n    }\n  }\n\n  private isProhibitedCharactersUsed(searchString: string | null): boolean {\n    const prohibitedCharacters = this.prohibitedCharacters();\n    if (!prohibitedCharacters || !searchString) {\n      return false;\n    }\n\n    for (const prohibitedCharacter of prohibitedCharacters) {\n      if (searchString.includes(prohibitedCharacter)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /** @internal */\n  @HostListener('focus')\n  focus(): void {\n    this.inputRef().nativeElement.focus();\n  }\n\n  protected onCancelFocus(event: Event): void {\n    event.stopPropagation();\n  }\n\n  protected input(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    if (!this.isProhibitedCharactersUsed(value)) {\n      this.debouncer.next(value);\n    }\n  }\n\n  protected onBlur(): void {\n    this.inFocus = false;\n    this.onTouch();\n  }\n\n  protected resetForm(): void {\n    this.setSearch('');\n  }\n\n  protected writeSearchValue(value: string): void {\n    this.searchValue.set(value);\n    this.inputRef().nativeElement.value = value;\n  }\n}\n","<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon-next class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.ps-9]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      aria-label=\"clear\"\n      class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon-next [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiSearchBarComponent } from './si-search-bar.component';\n\n@NgModule({\n  imports: [SiSearchBarComponent],\n  exports: [SiSearchBarComponent]\n})\nexport class SiSearchBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-search-bar.component';\nexport * from './si-search-bar.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;;;AAGG;MA8CU,oBAAoB,CAAA;AACd,IAAA,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAA+B,UAAU,CAAC;AAChF,IAAA,SAAS,GAAG,IAAI,OAAO,EAAU;AACxB,IAAA,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC;AAElD;;;;AAIG;IACM,YAAY,GAAG,KAAK,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;AAClE;;AAEG;IACM,oBAAoB,GAAG,KAAK,EAAU;AAC/C;;;;AAIG;AACM,IAAA,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC;AAChC;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACjE;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEhE;;AAEG;IACM,KAAK,GAAG,KAAK,EAAU;;IAGvB,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACjE;;;;AAIG;AACM,IAAA,YAAY,GAAG,KAAK,CAAyB,QAAQ,CAAC;;;AAItD,IAAA,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAEzF;;AAEG;IACM,YAAY,GAAG,MAAM,EAAU;IAE9B,SAAS,GAAG,KAAK;IACjB,OAAO,GAAG,KAAK;AAEf,IAAA,QAAQ,GAAG,CAAC,GAAQ,KAAU,GAAG;AACjC,IAAA,OAAO,GAAG,MAAW,GAAG;AAEf,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;AAE3E,IAAA,WAAW,GAAG,MAAM,CAAC,EAAE,CAAC;IACxB,KAAK,GAAG,QAAQ,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;;AAGrE,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC;;;AAIpC,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;;;AAIpB,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;;;AAInB,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC;;AAGtC,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,KAAK,EAAE;YACjB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC;;;IAIrD,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,IAAG;AACvE,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;AACvB,SAAC,CAAC;;IAGJ,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE;;AAGnB,IAAA,SAAS,CAAC,KAAc,EAAA;QAC9B,KAAK,KAAK,EAAE;AACZ,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE;AAChC,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;YAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK;AAC3C,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;;AAIzB,IAAA,0BAA0B,CAAC,YAA2B,EAAA;AAC5D,QAAA,MAAM,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,EAAE;AACxD,QAAA,IAAI,CAAC,oBAAoB,IAAI,CAAC,YAAY,EAAE;AAC1C,YAAA,OAAO,KAAK;;AAGd,QAAA,KAAK,MAAM,mBAAmB,IAAI,oBAAoB,EAAE;AACtD,YAAA,IAAI,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE;AAC9C,gBAAA,OAAO,IAAI;;;AAIf,QAAA,OAAO,KAAK;;;IAKd,KAAK,GAAA;QACH,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE;;AAG7B,IAAA,aAAa,CAAC,KAAY,EAAA;QAClC,KAAK,CAAC,eAAe,EAAE;;AAGf,IAAA,KAAK,CAAC,KAAY,EAAA;AAC1B,QAAA,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK;QACtD,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE;AAC3C,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAIpB,MAAM,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;QACpB,IAAI,CAAC,OAAO,EAAE;;IAGN,SAAS,GAAA;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;;AAGV,IAAA,gBAAgB,CAAC,KAAa,EAAA;AACtC,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK;;uGA7JlC,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,EAAA,EAAA,SAAA,EAZpB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,oBAAoB;AACjC,gBAAA,KAAK,EAAE;AACR;SACF,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3CH,6iCAiCA,4uCDCY,mBAAmB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAelB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAjBhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,OAAA,EAChB,CAAC,mBAAmB,CAAC,EAAA,SAAA,EAGnB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAA,oBAAsB;AACjC,4BAAA,KAAK,EAAE;AACR;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,kBAAkB,EAAE;AACrB,qBAAA,EAAA,QAAA,EAAA,6iCAAA,EAAA,MAAA,EAAA,CAAA,orCAAA,CAAA,EAAA;8BAqID,KAAK,EAAA,CAAA;sBADJ,YAAY;uBAAC,OAAO;;;AEnLvB;;;AAGG;MASU,iBAAiB,CAAA;uGAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;wGAAjB,iBAAiB,EAAA,OAAA,EAAA,CAHlB,oBAAoB,CAAA,EAAA,OAAA,EAAA,CACpB,oBAAoB,CAAA,EAAA,CAAA;AAEnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAHlB,oBAAoB,CAAA,EAAA,CAAA;;2FAGnB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAJ7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBAC/B,OAAO,EAAE,CAAC,oBAAoB;AAC/B,iBAAA;;;ACXD;;;AAGG;;ACHH;;AAEG;;;;"}
+{"version":3,"file":"siemens-element-ng-search-bar.mjs","sources":["../../../../projects/element-ng/search-bar/si-search-bar.component.ts","../../../../projects/element-ng/search-bar/si-search-bar.component.html","../../../../projects/element-ng/search-bar/si-search-bar.module.ts","../../../../projects/element-ng/search-bar/index.ts","../../../../projects/element-ng/search-bar/siemens-element-ng-search-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  HostListener,\n  input,\n  numberAttribute,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  output,\n  signal,\n  SimpleChanges,\n  viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { BackgroundColorVariant } from '@siemens/element-ng/common';\nimport { elementCancel, elementSearch, addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { Subject } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n@Component({\n  selector: 'si-search-bar',\n  imports: [SiIconComponent],\n  templateUrl: './si-search-bar.component.html',\n  styleUrl: './si-search-bar.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: SiSearchBarComponent,\n      multi: true\n    }\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.readonly]': 'readonly()'\n  }\n})\nexport class SiSearchBarComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {\n  private readonly inputRef = viewChild.required<ElementRef<HTMLInputElement>>('inputRef');\n  private debouncer = new Subject<string>();\n  private readonly disabledNgControl = signal(false);\n\n  /**\n   * Time unit change of search input takes effect.\n   *\n   * @defaultValue 400\n   */\n  readonly debounceTime = input(400, { transform: numberAttribute });\n  /**\n   * Prohibited characters restricting search.\n   */\n  readonly prohibitedCharacters = input<string>();\n  /**\n   * Define search input placeholder.\n   *\n   * @defaultValue ''\n   */\n  readonly placeholder = input('');\n  /**\n   * Display search icon before search input.\n   *\n   * @defaultValue false\n   */\n  readonly showIcon = input(false, { transform: booleanAttribute });\n  /**\n   * Whether the search is tabbable or not.\n   *\n   * @defaultValue true\n   */\n  readonly tabbable = input(true, { transform: booleanAttribute });\n\n  /**\n   * Define search input content.\n   */\n  readonly value = input<string>();\n\n  /** @defaultValue false */\n  readonly readonly = input(false, { transform: booleanAttribute });\n  /**\n   * Color to use for component background\n   *\n   * @defaultValue 'base-1'\n   */\n  readonly colorVariant = input<BackgroundColorVariant>('base-1');\n\n  /** @defaultValue false */\n  // eslint-disable-next-line @angular-eslint/no-input-rename\n  readonly disabledInput = input(false, { alias: 'disabled', transform: booleanAttribute });\n\n  /**\n   * Output callback event will provide you with search term if search input changes.\n   */\n  readonly searchChange = output<string>();\n\n  protected isInvalid = false;\n  protected inFocus = false;\n\n  protected onChange = (val: any): void => {};\n  protected onTouch = (): void => {};\n\n  protected readonly disabled = computed(() => this.disabledInput() || this.disabledNgControl());\n\n  protected readonly searchValue = signal('');\n  protected readonly icons = addIcons({ elementCancel, elementSearch });\n\n  /** @internal */\n  writeValue(value: string): void {\n    this.writeSearchValue(value ?? '');\n  }\n\n  /** @internal */\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  /** @internal */\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  /** @internal */\n  setDisabledState(disabled: boolean): void {\n    this.disabledNgControl.set(disabled);\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.value) {\n      this.writeSearchValue(changes.value.currentValue);\n    }\n  }\n\n  ngOnInit(): void {\n    this.debouncer.pipe(debounceTime(this.debounceTime())).subscribe(value => {\n      this.setSearch(value);\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.debouncer.complete();\n  }\n\n  private setSearch(value?: string): void {\n    value ??= '';\n    if (value !== this.searchValue()) {\n      this.searchValue.set(value);\n      this.inputRef().nativeElement.value = value;\n      this.onChange(value);\n      this.searchChange.emit(value);\n    }\n  }\n\n  private isProhibitedCharactersUsed(searchString: string | null): boolean {\n    const prohibitedCharacters = this.prohibitedCharacters();\n    if (!prohibitedCharacters || !searchString) {\n      return false;\n    }\n\n    for (const prohibitedCharacter of prohibitedCharacters) {\n      if (searchString.includes(prohibitedCharacter)) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /** @internal */\n  @HostListener('focus')\n  focus(): void {\n    this.inputRef().nativeElement.focus();\n  }\n\n  protected onCancelFocus(event: Event): void {\n    event.stopPropagation();\n  }\n\n  protected input(event: Event): void {\n    const value = (event.target as HTMLInputElement).value;\n    if (!this.isProhibitedCharactersUsed(value)) {\n      this.debouncer.next(value);\n    }\n  }\n\n  protected onBlur(): void {\n    this.inFocus = false;\n    this.onTouch();\n  }\n\n  protected resetForm(): void {\n    this.setSearch('');\n  }\n\n  protected writeSearchValue(value: string): void {\n    this.searchValue.set(value);\n    this.inputRef().nativeElement.value = value;\n  }\n}\n","<div class=\"position-relative\" [class.disabled]=\"disabled()\" [class.focus]=\"inFocus\">\n  @if (showIcon()) {\n    <si-icon class=\"search-bar-icon icon text-secondary\" [icon]=\"icons.elementSearch\" />\n  }\n  <input\n    #inputRef\n    type=\"text\"\n    class=\"form-control\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"placeholder()\"\n    [class.dark-background]=\"colorVariant() === 'base-0'\"\n    [class.ps-9]=\"showIcon()\"\n    [class.is-invalid]=\"isInvalid\"\n    [class.icon-end]=\"searchValue()\"\n    [attr.tabindex]=\"tabbable() ? '' : '-1'\"\n    [readonly]=\"readonly()\"\n    (focus)=\"inFocus = true\"\n    (blur)=\"onBlur()\"\n    (input)=\"input($event)\"\n  />\n  @if (searchValue()) {\n    <button\n      type=\"button\"\n      aria-label=\"clear\"\n      class=\"btn btn-circle btn-xs btn-ghost cancel-button\"\n      [disabled]=\"disabled() || readonly()\"\n      (click)=\"resetForm()\"\n      (focusin)=\"onCancelFocus($event)\"\n    >\n      <si-icon [icon]=\"icons.elementCancel\" />\n    </button>\n  }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiSearchBarComponent } from './si-search-bar.component';\n\n@NgModule({\n  imports: [SiSearchBarComponent],\n  exports: [SiSearchBarComponent]\n})\nexport class SiSearchBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2025\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-search-bar.component';\nexport * from './si-search-bar.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -7,7 +7,7 @@ import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { buildTrackByIdentity } from '@siemens/element-ng/common';
 import * as i1 from '@siemens/element-ng/auto-collapsable-list';
 import { SiAutoCollapsableListModule } from '@siemens/element-ng/auto-collapsable-list';
-import { SiIconNextComponent, addIcons, elementDown2, elementOk, elementSearch } from '@siemens/element-ng/icon';
+import { SiIconComponent, addIcons, elementDown2, elementOk, elementSearch } from '@siemens/element-ng/icon';
 import * as i1$2 from '@angular/common';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1$1 from '@siemens/element-ng/autocomplete';
@@ -228,19 +228,19 @@ class SiSelectOptionComponent {
     option = input.required();
     optionTemplate = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectOptionComponent, isStandalone: true, selector: "si-select-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-flex align-items-center overflow-hidden" }, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon-next\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [ngClass]=\"[(!item.disabled && item.iconColor) || '']\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon-next\n          class=\"icon me-2\"\n          [icon]=\"item.stackedIcon\"\n          [ngClass]=\"item.stackedIconColor\"\n        />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiSelectOptionTemplateDirective, selector: "[siSelectOptionTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectOptionComponent, isStandalone: true, selector: "si-select-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "d-flex align-items-center overflow-hidden" }, ngImport: i0, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [ngClass]=\"[(!item.disabled && item.iconColor) || '']\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon class=\"icon me-2\" [icon]=\"item.stackedIcon\" [ngClass]=\"item.stackedIconColor\" />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "directive", type: SiSelectOptionTemplateDirective, selector: "[siSelectOptionTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-select-option', imports: [
                         NgClass,
                         NgTemplateOutlet,
-                        SiIconNextComponent,
+                        SiIconComponent,
                         SiTranslatePipe,
                         SiSelectOptionTemplateDirective
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-flex align-items-center overflow-hidden'
-                    }, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon-next\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [ngClass]=\"[(!item.disabled && item.iconColor) || '']\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon-next\n          class=\"icon me-2\"\n          [icon]=\"item.stackedIcon\"\n          [ngClass]=\"item.stackedIconColor\"\n        />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n" }]
+                    }, template: "<ng-container\n  [ngTemplateOutlet]=\"optionTemplate() ?? defaultOptionTemplate\"\n  [ngTemplateOutletContext]=\"{ $implicit: option() }\"\n/>\n\n<ng-template #defaultOptionTemplate let-item siSelectOptionTemplate>\n  @if (item.icon) {\n    <i class=\"icon-stack\">\n      <si-icon\n        class=\"icon me-2\"\n        [icon]=\"item.icon\"\n        [ngClass]=\"[(!item.disabled && item.iconColor) || '']\"\n      />\n      @if (item.stackedIcon) {\n        <si-icon class=\"icon me-2\" [icon]=\"item.stackedIcon\" [ngClass]=\"item.stackedIconColor\" />\n      }\n    </i>\n  }\n  @if (item.label) {\n    <span class=\"text-truncate\">{{ item.label | translate }}</span>\n  }\n</ng-template>\n" }]
         }] });
 
 /**
@@ -361,16 +361,11 @@ class SiSelectInputComponent {
         this.openListbox.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectInputComponent, isStandalone: true, selector: "si-select-input", inputs: { baseId: { classPropertyName: "baseId", publicName: "baseId", isSignal: true, isRequired: true, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openListbox: "openListbox" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, listeners: { "blur": "blur()", "click": "click()", "keydown.arrowDown": "click($event)", "keydown.alt.arrowDown": "click($event)", "keydown.arrowUp": "click($event)", "keydown.enter": "click()", "keydown.space": "click()" }, properties: { "attr.aria-expanded": "open()", "attr.aria-readonly": "readonly()", "attr.aria-controls": "controls()", "attr.aria-labelledby": "labeledBy()", "attr.aria-disabled": "selectionStrategy.disabled()", "attr.tabindex": "selectionStrategy.disabled() ? \"-1\" : \"0\"", "class.disabled": "selectionStrategy.disabled()", "class.active": "open()" }, classAttribute: "select focus-none dropdown-toggle d-flex align-items-center ps-4" }, ngImport: i0, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-grow-1\"\n  [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"overflow-item\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<si-icon-next\n  class=\"dropdown-caret icon flip-rtl\"\n  [class.text-muted]=\"readonly()\"\n  [icon]=\"icons.elementDown2\"\n/>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:700;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:4px;padding-inline-end:calc(12px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px}:host-context(.dropdown:not(.form-control)) :host:not(.disabled):hover{background:var(--element-base-1-hover)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled).active{background:var(--element-base-1-selected)}si-select-option+si-select-option:before{content:\",\\a0\"}.overflow-item{border-radius:var(--element-radius-3);background:var(--element-base-0);margin-inline-start:4px;padding-inline:8px}.dropdown-caret{transform:translate(var(--si-feedback-icon-offset, 0))}\n"], dependencies: [{ kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i1.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i1.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i1.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectInputComponent, isStandalone: true, selector: "si-select-input", inputs: { baseId: { classPropertyName: "baseId", publicName: "baseId", isSignal: true, isRequired: true, transformFunction: null }, labelledby: { classPropertyName: "labelledby", publicName: "labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openListbox: "openListbox" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, listeners: { "blur": "blur()", "click": "click()", "keydown.arrowDown": "click($event)", "keydown.alt.arrowDown": "click($event)", "keydown.arrowUp": "click($event)", "keydown.enter": "click()", "keydown.space": "click()" }, properties: { "attr.aria-expanded": "open()", "attr.aria-readonly": "readonly()", "attr.aria-controls": "controls()", "attr.aria-labelledby": "labeledBy()", "attr.aria-disabled": "selectionStrategy.disabled()", "attr.tabindex": "selectionStrategy.disabled() ? \"-1\" : \"0\"", "class.disabled": "selectionStrategy.disabled()", "class.active": "open()" }, classAttribute: "select focus-none dropdown-toggle d-flex align-items-center ps-4" }, ngImport: i0, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-grow-1\"\n  [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"overflow-item\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<si-icon\n  class=\"dropdown-caret icon flip-rtl\"\n  [class.text-muted]=\"readonly()\"\n  [icon]=\"icons.elementDown2\"\n/>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:700;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:4px;padding-inline-end:calc(12px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px}:host-context(.dropdown:not(.form-control)) :host:not(.disabled):hover{background:var(--element-base-1-hover)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled).active{background:var(--element-base-1-selected)}si-select-option+si-select-option:before{content:\",\\a0\"}.overflow-item{border-radius:var(--element-radius-3);background:var(--element-base-0);margin-inline-start:4px;padding-inline:8px}.dropdown-caret{transform:translate(var(--si-feedback-icon-offset, 0))}\n"], dependencies: [{ kind: "ngmodule", type: SiAutoCollapsableListModule }, { kind: "directive", type: i1.SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: i1.SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: i1.SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-select-input', imports: [
-                        SiAutoCollapsableListModule,
-                        SiIconNextComponent,
-                        SiSelectOptionComponent,
-                        SiTranslatePipe
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-select-input', imports: [SiAutoCollapsableListModule, SiIconComponent, SiSelectOptionComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         role: 'combobox',
                         class: 'select focus-none dropdown-toggle d-flex align-items-center ps-4',
                         'aria-autocomplete': 'none',
@@ -383,7 +378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[attr.tabindex]': 'selectionStrategy.disabled() ? "-1" : "0"',
                         '[class.disabled]': 'selectionStrategy.disabled()',
                         '[class.active]': 'open()'
-                    }, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-grow-1\"\n  [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"overflow-item\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<si-icon-next\n  class=\"dropdown-caret icon flip-rtl\"\n  [class.text-muted]=\"readonly()\"\n  [icon]=\"icons.elementDown2\"\n/>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:700;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:4px;padding-inline-end:calc(12px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px}:host-context(.dropdown:not(.form-control)) :host:not(.disabled):hover{background:var(--element-base-1-hover)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled).active{background:var(--element-base-1-selected)}si-select-option+si-select-option:before{content:\",\\a0\"}.overflow-item{border-radius:var(--element-radius-3);background:var(--element-base-0);margin-inline-start:4px;padding-inline:8px}.dropdown-caret{transform:translate(var(--si-feedback-icon-offset, 0))}\n"] }]
+                    }, template: "@if (ariaLabel()) {\n  <span class=\"visually-hidden\" [id]=\"baseId() + '-aria-label'\">{{ ariaLabel() }}</span>\n}\n<div\n  class=\"d-flex align-items-center flex-grow-1\"\n  [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n  [id]=\"baseId() + '-content'\"\n  [siAutoCollapsableList]=\"selectionStrategy.allowMultiple\"\n>\n  @for (activeOption of selectedRows(); track activeOption) {\n    @if (activeOption) {\n      <si-select-option\n        siAutoCollapsableListItem\n        [option]=\"activeOption\"\n        [optionTemplate]=\"optionTemplate()\"\n        [class.overflow-hidden]=\"!selectionStrategy.allowMultiple\"\n      />\n    }\n  } @empty {\n    <div class=\"text-secondary\">{{ placeholder() | translate }}</div>\n  }\n  @if (selectionStrategy.allowMultiple) {\n    <div #overflowItem=\"siAutoCollapsableListOverflowItem\" siAutoCollapsableListOverflowItem>\n      <div class=\"overflow-item\"> {{ overflowItem.hiddenItemCount }}+</div>\n    </div>\n  }\n</div>\n<si-icon\n  class=\"dropdown-caret icon flip-rtl\"\n  [class.text-muted]=\"readonly()\"\n  [icon]=\"icons.elementDown2\"\n/>\n", styles: ["@charset \"UTF-8\";:host{cursor:pointer;font-weight:700;min-inline-size:72px;block-size:100%;color:var(--element-text-primary);padding-block:4px;padding-inline-end:calc(12px + var(--si-feedback-icon-offset, 0px))}:host.disabled{color:var(--element-text-disabled)}:host-context(.form-control) :host{font-weight:400;padding-block:3px}:host-context(.dropdown:not(.form-control)) :host:not(.disabled):hover{background:var(--element-base-1-hover)}:host-context(.dropdown:not(.form-control)) :host:not(.disabled).active{background:var(--element-base-1-selected)}si-select-option+si-select-option:before{content:\",\\a0\"}.overflow-item{border-radius:var(--element-radius-3);background:var(--element-base-0);margin-inline-start:4px;padding-inline:8px}.dropdown-caret{transform:translate(var(--si-feedback-icon-offset, 0))}\n"] }]
         }], propDecorators: { blur: [{
                 type: HostListener,
                 args: ['blur']
@@ -418,16 +413,16 @@ class SiSelectOptionRowComponent {
     selected = input(false, { transform: booleanAttribute });
     icons = addIcons({ elementOk });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectOptionRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectOptionRowComponent, isStandalone: true, selector: "si-select-option-row", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "!!this.option().disabled", "attr.aria-selected": "selected()", "attr.data-id": "this.option().value" }, classAttribute: "dropdown-item focus-none pe-4 gap-4" }, ngImport: i0, template: "<span\n  class=\"form-check-input si-form-checkbox\"\n  [class.checked]=\"selected()\"\n  [class.disabled]=\"option().disabled\"\n></span>\n<si-select-option [option]=\"option()\" [optionTemplate]=\"optionTemplate()\" />\n@if (selected()) {\n  <span class=\"ms-auto selected-marker\" aria-hidden=\"true\">\n    <si-icon-next class=\"d-block icon\" [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:-.25rem}.form-check-input{display:none}:host-context(.si-multi-select) .selected-marker{display:none}:host-context(.si-multi-select) .form-check-input{display:block}\n"], dependencies: [{ kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectOptionRowComponent, isStandalone: true, selector: "si-select-option-row", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "!!this.option().disabled", "attr.aria-selected": "selected()", "attr.data-id": "this.option().value" }, classAttribute: "dropdown-item focus-none pe-4 gap-4" }, ngImport: i0, template: "<span\n  class=\"form-check-input si-form-checkbox\"\n  [class.checked]=\"selected()\"\n  [class.disabled]=\"option().disabled\"\n></span>\n<si-select-option [option]=\"option()\" [optionTemplate]=\"optionTemplate()\" />\n@if (selected()) {\n  <span class=\"ms-auto selected-marker\" aria-hidden=\"true\">\n    <si-icon class=\"d-block icon\" [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:-.25rem}.form-check-input{display:none}:host-context(.si-multi-select) .selected-marker{display:none}:host-context(.si-multi-select) .form-check-input{display:block}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSelectOptionComponent, selector: "si-select-option", inputs: ["option", "optionTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectOptionRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-select-option-row', imports: [SiIconNextComponent, SiSelectOptionComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-select-option-row', imports: [SiIconComponent, SiSelectOptionComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'dropdown-item focus-none pe-4 gap-4',
                         '[class.disabled]': '!!this.option().disabled',
                         '[attr.aria-selected]': 'selected()',
                         '[attr.data-id]': 'this.option().value'
-                    }, template: "<span\n  class=\"form-check-input si-form-checkbox\"\n  [class.checked]=\"selected()\"\n  [class.disabled]=\"option().disabled\"\n></span>\n<si-select-option [option]=\"option()\" [optionTemplate]=\"optionTemplate()\" />\n@if (selected()) {\n  <span class=\"ms-auto selected-marker\" aria-hidden=\"true\">\n    <si-icon-next class=\"d-block icon\" [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:-.25rem}.form-check-input{display:none}:host-context(.si-multi-select) .selected-marker{display:none}:host-context(.si-multi-select) .form-check-input{display:block}\n"] }]
+                    }, template: "<span\n  class=\"form-check-input si-form-checkbox\"\n  [class.checked]=\"selected()\"\n  [class.disabled]=\"option().disabled\"\n></span>\n<si-select-option [option]=\"option()\" [optionTemplate]=\"optionTemplate()\" />\n@if (selected()) {\n  <span class=\"ms-auto selected-marker\" aria-hidden=\"true\">\n    <si-icon class=\"d-block icon\" [icon]=\"icons.elementOk\" />\n  </span>\n}\n", styles: [".selected-marker>span{font-size:1.5rem;margin-inline-end:-.25rem}.form-check-input{display:none}:host-context(.si-multi-select) .selected-marker{display:none}:host-context(.si-multi-select) .form-check-input{display:block}\n"] }]
         }] });
 
 /**
@@ -583,14 +578,14 @@ class SiSelectListHasFilterComponent extends SiSelectListBase {
         this.closeOverlayIfSingle();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectListHasFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectListHasFilterComponent, isStandalone: true, selector: "si-select-list-has-filter", inputs: { filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: true, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "pt-0" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control ps-9 border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon-next\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiAutocompleteDirective, selector: "input[siAutocomplete]", exportAs: ["siAutocomplete"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: SiAutocompleteModule }, { kind: "directive", type: i1$1.SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: i1$1.SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiSelectListHasFilterComponent, isStandalone: true, selector: "si-select-list-has-filter", inputs: { filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: true, transformFunction: null }, noResultsFoundLabel: { classPropertyName: "noResultsFoundLabel", publicName: "noResultsFoundLabel", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.id": "id()" }, classAttribute: "pt-0" }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control ps-9 border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: SiAutocompleteDirective, selector: "input[siAutocomplete]", exportAs: ["siAutocomplete"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSelectGroupTemplateDirective, selector: "[siSelectGroupTemplate]" }, { kind: "component", type: SiSelectOptionRowComponent, selector: "si-select-option-row", inputs: ["option", "optionTemplate", "selected"] }, { kind: "directive", type: SiSelectOptionRowTemplateDirective, selector: "[siSelectOptionRowTemplate]" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "ngmodule", type: SiAutocompleteModule }, { kind: "directive", type: i1$1.SiAutocompleteListboxDirective, selector: "[siAutocompleteListboxFor]", inputs: ["id", "siAutocompleteListboxFor", "siAutocompleteDefaultIndex"], outputs: ["siAutocompleteOptionSubmitted"], exportAs: ["siAutocompleteListbox"] }, { kind: "directive", type: i1$1.SiAutocompleteOptionDirective, selector: "[siAutocompleteOption]", inputs: ["id", "disabled", "siAutocompleteOption"], exportAs: ["siAutocompleteOption"] }, { kind: "component", type: SiLoadingSpinnerComponent, selector: "si-loading-spinner", inputs: ["isBlockingSpinner", "isSpinnerOverlay", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiSelectListHasFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-select-list-has-filter', imports: [
                         NgTemplateOutlet,
                         SiAutocompleteDirective,
-                        SiIconNextComponent,
+                        SiIconComponent,
                         SiSelectGroupTemplateDirective,
                         SiSelectOptionRowComponent,
                         SiSelectOptionRowTemplateDirective,
@@ -600,7 +595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'pt-0',
                         '[attr.id]': 'id()'
-                    }, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control ps-9 border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon-next\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.5rem}\n"] }]
+                    }, template: "<div class=\"pt-5 pb-5 px-5 top-0\">\n  <div class=\"position-relative\">\n    <input\n      #filter\n      #siAutocomplete=\"siAutocomplete\"\n      siAutocomplete\n      class=\"form-control ps-9 border-0 rounded-2 bg-base-0\"\n      [placeholder]=\"filterPlaceholder() | translate\"\n      [id]=\"baseId() + 'filter-input'\"\n      [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n      (input)=\"input()\"\n    />\n    <si-icon\n      class=\"icon text-secondary position-absolute top-0 bottom-0 d-flex align-items-center ps-2\"\n      [icon]=\"icons.elementSearch\"\n    />\n    @if (selectOptions.loading?.()) {\n      <si-loading-spinner class=\"position-absolute end-0 bottom-0 d-flex align-items-center p-2\" />\n    }\n  </div>\n</div>\n<div\n  class=\"si-select-filtered-items\"\n  tabindex=\"-1\"\n  [siAutocompleteListboxFor]=\"siAutocomplete\"\n  [siAutocompleteDefaultIndex]=\"initIndex()\"\n  [attr.aria-labelledby]=\"baseId() + '-aria-label' + ' ' + labelledby()\"\n  (siAutocompleteOptionSubmitted)=\"select($event)\"\n>\n  @for (item of rows(); track item; let index = $index) {\n    @if (item.type === 'group') {\n      <div\n        role=\"group\"\n        class=\"ps-0\"\n        aria-disabled=\"false\"\n        [attr.aria-labelledby]=\"baseId() + '-' + index + '-group-header'\"\n      >\n        <div class=\"dropdown-header\" [id]=\"baseId() + '-' + index + '-group-header'\">\n          <ng-container\n            [ngTemplateOutlet]=\"groupTemplate() ?? defaultGroupTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        </div>\n        @for (optionRow of item.options; track optionRow) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionRowTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionRow }\"\n          />\n        }\n      </div>\n    }\n    @if (item.type === 'option') {\n      <ng-container\n        [ngTemplateOutlet]=\"optionRowTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n      />\n    }\n  } @empty {\n    <div\n      role=\"option\"\n      aria-disabled=\"true\"\n      aria-selected=\"false\"\n      class=\"dropdown-item disabled text-secondary justify-content-center mb-2\"\n    >\n      <span>{{ noResultsFoundLabel() | translate }}</span>\n    </div>\n  }\n\n  <ng-template #optionRowTemplate let-option siSelectOptionRowTemplate>\n    <si-select-option-row\n      [option]=\"option\"\n      [optionTemplate]=\"optionTemplate()\"\n      [siAutocompleteOption]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"selectionStrategy.arrayValue().includes(option.value)\"\n    />\n  </ng-template>\n</div>\n@if (actionsTemplate()) {\n  <div class=\"dropdown-divider\"></div>\n  <div class=\"d-flex flex-column align-items-start\">\n    <ng-container\n      [ngTemplateOutlet]=\"actionsTemplate()!\"\n      [ngTemplateOutletContext]=\"{\n        searchText: filter.value,\n        visibleOptionsCount: rows().length\n      }\"\n    />\n  </div>\n}\n\n<ng-template #defaultGroupTemplate let-group siSelectGroupTemplate>\n  {{ group.label | translate }}\n</ng-template>\n", styles: [".si-select-filtered-items{max-block-size:min(100vh - 56px,266px);overflow-y:auto}si-loading-spinner{--loading-spinner-size: 1.5rem}\n"] }]
         }], ctorParameters: () => [] });
 
 /**