@odx/angular 12.19.2 → 12.21.0

package/fesm2022/odx-angular-components-autocomplete.mjs

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, forwardRef, ContentChildren, ContentChild, HostListener, Pipe, NgModule } from '@angular/core';
+import { InjectionToken, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, input, forwardRef, ContentChildren, ContentChild, HostListener, Pipe, NgModule } from '@angular/core';
 import * as i1 from '@odx/angular';
 import { CoreModule, ReadonlyController, WithTabIndex, ClickOutsideDirective } from '@odx/angular';
 import { AutocompleteControl, ODX_SEARCH_FILTER_HOST, BaseSearchFilterPipe } from '@odx/angular/cdk/autocomplete-control';
@@ -93,6 +93,11 @@ let AutocompleteComponent = class AutocompleteComponent extends AutocompleteCont
         this.defaultActiveOptionIndex = 0;
         this.patchValueFlag = false;
         this.clickOutsideDirective = inject(ClickOutsideDirective, { host: true });
+        /** Text to display when no options are found.
+         *
+         * @type {string | null}
+         */
+        this.notFoundText = input(null);
     }
     ngAfterViewInit() {
         if (!this.options)
@@ -149,11 +154,12 @@ let AutocompleteComponent = class AutocompleteComponent extends AutocompleteCont
             this.patchValueFlag = false;
             return;
         }
-        if (this.isOpen && !this.hasOptions) {
-            this.closeDropdown();
-        }
-        else if (!this.isOpen && this.hasOptions) {
+        if (!this.isOpen && (this.hasOptions || !!this.notFoundText())) {
             this.openDropdown();
+            return;
+        }
+        if (this.isOpen && !this.hasOptions && !this.notFoundText()) {
+            this.closeDropdown();
         }
     }
     handleClickEvent() {
@@ -168,7 +174,7 @@ let AutocompleteComponent = class AutocompleteComponent extends AutocompleteCont
             this.openDropdown();
         }
     }
-    handleKeyboardEvent(event) {
+    async handleKeyboardEvent(event) {
         if (this.isReadonly || this.isDisabled)
             return;
         if (event.key === 'Escape') {
@@ -191,11 +197,6 @@ let AutocompleteComponent = class AutocompleteComponent extends AutocompleteCont
         if (!this.isOpen && event.key === 'Tab') {
             return;
         }
-        deferFn(() => {
-            if (!this.isOpen && this.hasOptions) {
-                this.openDropdown();
-            }
-        });
         this.keyManager?.onKeydown(event);
     }
     activateSelectedOption() {
@@ -215,7 +216,7 @@ let AutocompleteComponent = class AutocompleteComponent extends AutocompleteCont
         this.searchField?.blur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "odx-autocomplete", host: { listeners: { "click": "handleClickEvent()", "keydown": "handleKeyboardEvent($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "odx-autocomplete", inputs: { notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClickEvent()", "keydown": "handleKeyboardEvent($event)" } }, providers: [
             {
                 provide: AUTOCOMPLETE_CONTROL,
                 useExisting: forwardRef(() => AutocompleteComponent),
@@ -224,14 +225,14 @@ let AutocompleteComponent = class AutocompleteComponent extends AutocompleteCont
                 provide: ODX_SEARCH_FILTER_HOST,
                 useExisting: AUTOCOMPLETE_CONTROL,
             },
-        ], queries: [{ propertyName: "searchField", first: true, predicate: AutocompleteInputControlDirective, descendants: true }, { propertyName: "options", predicate: AutocompleteOptionComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ClickOutsideDirective }], ngImport: i0, template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-autocomplete__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"dropdownReferenceElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  [odxDropdownOpenTrigger]=\"[]\"\n  [odxDropdownClickOutsideActive]=\"false\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownAfterOpen)=\"onDropdownOpened()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n>\n  <ng-content select=\"input[odxAutocompleteControl]\" />\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    @if (hasOptions) {\n      <ng-content />\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownClickOutsideActive", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "ngmodule", type: LoadingSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "searchField", first: true, predicate: AutocompleteInputControlDirective, descendants: true }, { propertyName: "options", predicate: AutocompleteOptionComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i1.ClickOutsideDirective }], ngImport: i0, template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-autocomplete__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"dropdownReferenceElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  [odxDropdownOpenTrigger]=\"[]\"\n  [odxDropdownClickOutsideActive]=\"false\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownAfterOpen)=\"onDropdownOpened()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n>\n  <ng-content select=\"input[odxAutocompleteControl]\" />\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    @if (hasOptions) {\n      <ng-content />\n    } @else if (!!notFoundText()) {\n      <odx-autocomplete-option class=\"is-disabled\">{{ notFoundText() }}</odx-autocomplete-option>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownClickOutsideActive", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "ngmodule", type: LoadingSpinnerModule }, { kind: "component", type: AutocompleteOptionComponent, selector: "odx-autocomplete-option" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 AutocompleteComponent = __decorate([
     CSSComponent('autocomplete')
 ], AutocompleteComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-autocomplete', imports: [DropdownDirective, LoadingSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ standalone: true, selector: 'odx-autocomplete', imports: [DropdownDirective, LoadingSpinnerModule, AutocompleteOptionComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: AUTOCOMPLETE_CONTROL,
                             useExisting: forwardRef(() => AutocompleteComponent),
@@ -240,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: ODX_SEARCH_FILTER_HOST,
                             useExisting: AUTOCOMPLETE_CONTROL,
                         },
-                    ], hostDirectives: [ClickOutsideDirective], template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-autocomplete__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"dropdownReferenceElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  [odxDropdownOpenTrigger]=\"[]\"\n  [odxDropdownClickOutsideActive]=\"false\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownAfterOpen)=\"onDropdownOpened()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n>\n  <ng-content select=\"input[odxAutocompleteControl]\" />\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    @if (hasOptions) {\n      <ng-content />\n    }\n  </div>\n</ng-template>\n" }]
+                    ], hostDirectives: [ClickOutsideDirective], template: "<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-autocomplete__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"dropdownReferenceElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  [odxDropdownOpenTrigger]=\"[]\"\n  [odxDropdownClickOutsideActive]=\"false\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownAfterOpen)=\"onDropdownOpened()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n>\n  <ng-content select=\"input[odxAutocompleteControl]\" />\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    @if (hasOptions) {\n      <ng-content />\n    } @else if (!!notFoundText()) {\n      <odx-autocomplete-option class=\"is-disabled\">{{ notFoundText() }}</odx-autocomplete-option>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [AutocompleteOptionComponent, { descendants: true, emitDistinctChangesOnly: true }]

package/fesm2022/odx-angular-components-autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-components-autocomplete.mjs","sources":["../../../../libs/angular/components/autocomplete/src/lib/autocomplete.tokens.ts","../../../../libs/angular/components/autocomplete/src/lib/components/option/autocomplete-option.component.ts","../../../../libs/angular/components/autocomplete/src/lib/components/option/autocomplete-option.component.html","../../../../libs/angular/components/autocomplete/src/lib/directives/autocomplete-input-control.directive.ts","../../../../libs/angular/components/autocomplete/src/lib/autocomplete.component.ts","../../../../libs/angular/components/autocomplete/src/lib/autocomplete.component.html","../../../../libs/angular/components/autocomplete/src/lib/pipes/autocomplete-search-filter.pipe.ts","../../../../libs/angular/components/autocomplete/src/lib/autocomplete.module.ts","../../../../libs/angular/components/autocomplete/src/odx-angular-components-autocomplete.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { AutocompleteComponent } from './autocomplete.component';\n\nexport const AUTOCOMPLETE_CONTROL = new InjectionToken<AutocompleteComponent>('@odx/angular/components/autocomplete::AutocompleteComponent');\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { OptionControl } from '@odx/angular/cdk/option-control';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { deferFn } from '@odx/angular/utils';\nimport { AUTOCOMPLETE_CONTROL } from '../../autocomplete.tokens';\n\n/**\n * Represents an option component for the autocomplete control.\n *\n * @template T - The type of the option value.\n */\n@CSSComponent('autocomplete-option')\n@Component({\n  standalone: true,\n  selector: 'odx-autocomplete-option',\n  imports: [CoreModule],\n  templateUrl: './autocomplete-option.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AutocompleteOptionComponent<T> extends OptionControl<T> {\n  protected readonly autocompleteControl = inject(AUTOCOMPLETE_CONTROL);\n\n  /**\n   * Sets the active styles for the option component.\n   */\n  public setActiveStyles(): void {\n    deferFn(() => {\n      this.isActive = true;\n      this.cdr.markForCheck();\n    });\n\n    if (this.autocompleteControl.isOpen) {\n      this.autocompleteControl.scrollOptionIntoView(this);\n    }\n  }\n\n  protected selectOption(): void {\n    this.autocompleteControl.selectOption(this);\n  }\n}\n","<ng-content />\n","import { Directive } from '@angular/core';\nimport { ReadonlyController, WithTabIndex } from '@odx/angular';\nimport { InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { CSSComponent } from '@odx/angular/internal';\n\n/**\n * Directive for controlling the input in an autocomplete component.\n * Extends the base InputControlDirective class.\n */\n@CSSComponent('autocomplete__control')\n@Directive({\n  standalone: true,\n  selector: 'input[odxAutocompleteControl]',\n  host: {\n    '[attr.readonly]': 'readonlyController?.readonly || null',\n  },\n  providers: [ReadonlyController.connect()],\n  hostDirectives: [WithTabIndex],\n})\nexport class AutocompleteInputControlDirective extends InputControlDirective {\n  protected readonly readonlyController = ReadonlyController.inject();\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ContentChildren,\n  forwardRef,\n  HostListener,\n  inject,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ClickOutsideDirective } from '@odx/angular';\nimport { AutocompleteControl, ODX_SEARCH_FILTER_HOST } from '@odx/angular/cdk/autocomplete-control';\nimport { DropdownDirective } from '@odx/angular/components/dropdown';\nimport { LoadingSpinnerModule } from '@odx/angular/components/loading-spinner';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { deferFn } from '@odx/angular/utils';\nimport { filter, tap } from 'rxjs';\nimport { AUTOCOMPLETE_CONTROL } from './autocomplete.tokens';\nimport { AutocompleteOptionComponent } from './components';\nimport { AutocompleteInputControlDirective } from './directives';\n\n/**\n * Represents an autocomplete component that provides user interface for a dropdown list to select from as users type.\n * It extends `AutocompleteControl`, integrating custom logic for handling keyboard and mouse events,\n * managing the dropdown state, and updating the associated search field.\n *\n * @see {AutocompleteControl}\n *\n * @template T - The type of the value handled by the autocomplete.\n */\n@CSSComponent('autocomplete')\n@Component({\n  standalone: true,\n  selector: 'odx-autocomplete',\n  imports: [DropdownDirective, LoadingSpinnerModule],\n  templateUrl: './autocomplete.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: AUTOCOMPLETE_CONTROL,\n      useExisting: forwardRef(() => AutocompleteComponent),\n    },\n    {\n      provide: ODX_SEARCH_FILTER_HOST,\n      useExisting: AUTOCOMPLETE_CONTROL,\n    },\n  ],\n  hostDirectives: [ClickOutsideDirective],\n})\nexport class AutocompleteComponent<T = unknown> extends AutocompleteControl<T | null> implements AfterViewInit {\n  private readonly defaultActiveOptionIndex = 0;\n  private patchValueFlag = false;\n  protected readonly clickOutsideDirective = inject(ClickOutsideDirective, { host: true });\n\n  /**\n   * The list of autocomplete options.\n   *\n   * @type {QueryList<AutocompleteOptionComponent<T>> | undefined}\n   */\n  @ContentChildren(AutocompleteOptionComponent, { descendants: true, emitDistinctChangesOnly: true })\n  public options?: QueryList<AutocompleteOptionComponent<T>>;\n\n  /**\n   * The search field input control.\n   *\n   * @type {AutocompleteInputControlDirective | undefined}\n   */\n  @ContentChild(AutocompleteInputControlDirective)\n  public searchField?: AutocompleteInputControlDirective;\n\n  public override ngAfterViewInit(): void {\n    if (!this.options) return;\n    if (this.value) this.updateSearchField(this.value);\n    this.initKeyManager(this.options.toArray());\n    this.handleQueryListOption(this.options);\n    this.handleSearchFieldChanges();\n    this.handleClickOutside();\n  }\n\n  /**\n   * Selects an option, updates the value, updates the search field display,\n   * emits the selected value, and closes the dropdown.\n   *\n   * @param {AutocompleteOptionComponent<T> | null} option - The option component to select. If the option is undefined or its value is undefined,\n   * no action is taken.\n   */\n  public selectOption(option?: AutocompleteOptionComponent<T> | null): void {\n    if (!option?.value) return;\n\n    this.updateValue(option.value);\n    this.updateSearchField(option.value);\n\n    this.optionSelected.emit(option.value);\n\n    this.closeDropdown();\n  }\n\n  /**\n   * Resets the search field to its initial state and updates the value of the autocomplete\n   * to an empty string or initial value.\n   */\n  public resetSearchField(): void {\n    this.updateValue('' as T);\n    this.searchField?.reset();\n  }\n\n  protected handleQueryListOption(options: QueryList<AutocompleteOptionComponent<T>>): void {\n    options.changes\n      .pipe(\n        tap(() => deferFn(() => this.updateDropdownState())),\n        filter(() => this.isOpen),\n        this.takeUntilDestroyed(),\n      )\n      .subscribe(() => {\n        deferFn(() => this.activateSelectedOption());\n      });\n  }\n\n  protected handleSearchFieldChanges(): void {\n    this.searchField?.valueChange$.pipe(this.takeUntilDestroyed()).subscribe(() => this.triggerControllerChange());\n  }\n\n  protected handleClickOutside(): void {\n    this.clickOutsideDirective.odxClickOutside.pipe(this.takeUntilDestroyed()).subscribe(() => this.clickOutside());\n  }\n\n  protected clickOutside(): void {\n    this.closeDropdown();\n    this.blurSelectSearchField();\n  }\n\n  protected updateDropdownState(): void {\n    if (this.patchValueFlag) {\n      this.patchValueFlag = false;\n      return;\n    }\n\n    if (this.isOpen && !this.hasOptions) {\n      this.closeDropdown();\n    } else if (!this.isOpen && this.hasOptions) {\n      this.openDropdown();\n    }\n  }\n\n  @HostListener('click')\n  protected handleClickEvent() {\n    if (this.isLoading && this.isOpen) {\n      this.closeDropdown();\n      this.blurSelectSearchField();\n      return;\n    }\n\n    if (this.isReadonly || this.isDisabled) return;\n\n    if (!this.isOpen && this.hasOptions) {\n      this.openDropdown();\n    }\n  }\n\n  @HostListener('keydown', ['$event'])\n  protected handleKeyboardEvent(event: KeyboardEvent) {\n    if (this.isReadonly || this.isDisabled) return;\n\n    if (event.key === 'Escape') {\n      this.resetSearchField();\n      this.blurSelectSearchField();\n      return;\n    }\n\n    if (this.isOpen && this.hasOptions) {\n      if (event.key === 'Enter' || event.key === 'Tab') {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        this.selectOption(this.keyManager?.activeItem as AutocompleteOptionComponent<T> | undefined);\n        return;\n      }\n    }\n\n    if (event.key === 'Enter') {\n      this.optionSelected.emit((this.value ?? '') as T);\n      return;\n    }\n\n    if (!this.isOpen && event.key === 'Tab') {\n      return;\n    }\n\n    deferFn(() => {\n      if (!this.isOpen && this.hasOptions) {\n        this.openDropdown();\n      }\n    });\n\n    this.keyManager?.onKeydown(event);\n  }\n\n  protected activateSelectedOption(): void {\n    this.keyManager?.setActiveItem(this.defaultActiveOptionIndex);\n  }\n\n  protected override onDropdownClosed(): void {\n    super.onDropdownClosed();\n    !this.searchField?.nativeElementValue && this.blurSelectSearchField();\n  }\n\n  private updateSearchField(value: T): void {\n    if (!this.searchField) return;\n    this.patchValueFlag = true;\n    this.searchField.nativeElementValue = this.stringify?.(value) ?? (value as string);\n  }\n\n  private blurSelectSearchField(): void {\n    this.searchField?.blur();\n  }\n}\n","<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-autocomplete__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"dropdownReferenceElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  [odxDropdownOpenTrigger]=\"[]\"\n  [odxDropdownClickOutsideActive]=\"false\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownAfterOpen)=\"onDropdownOpened()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n>\n  <ng-content select=\"input[odxAutocompleteControl]\" />\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    @if (hasOptions) {\n      <ng-content />\n    }\n  </div>\n</ng-template>\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { BaseSearchFilterPipe } from '@odx/angular/cdk/autocomplete-control';\n\n@Pipe({\n  pure: false,\n  name: 'odxAutocompleteSearchFilter',\n  standalone: true,\n})\nexport class AutocompleteSearchFilterPipe extends BaseSearchFilterPipe implements PipeTransform {}\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { AutocompleteComponent } from './autocomplete.component';\nimport { AutocompleteOptionComponent } from './components';\nimport { AutocompleteInputControlDirective } from './directives';\nimport { AutocompleteSearchFilterPipe } from './pipes';\n\nconst modules = [AutocompleteComponent, AutocompleteInputControlDirective, AutocompleteSearchFilterPipe, AutocompleteOptionComponent];\n\n@NgModule({\n  imports: modules,\n  exports: [CoreModule, ...modules],\n})\nexport class AutocompleteModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"odx-angular-components-autocomplete.mjs","sources":["../../../../libs/angular/components/autocomplete/src/lib/autocomplete.tokens.ts","../../../../libs/angular/components/autocomplete/src/lib/components/option/autocomplete-option.component.ts","../../../../libs/angular/components/autocomplete/src/lib/components/option/autocomplete-option.component.html","../../../../libs/angular/components/autocomplete/src/lib/directives/autocomplete-input-control.directive.ts","../../../../libs/angular/components/autocomplete/src/lib/autocomplete.component.ts","../../../../libs/angular/components/autocomplete/src/lib/autocomplete.component.html","../../../../libs/angular/components/autocomplete/src/lib/pipes/autocomplete-search-filter.pipe.ts","../../../../libs/angular/components/autocomplete/src/lib/autocomplete.module.ts","../../../../libs/angular/components/autocomplete/src/odx-angular-components-autocomplete.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { AutocompleteComponent } from './autocomplete.component';\n\nexport const AUTOCOMPLETE_CONTROL = new InjectionToken<AutocompleteComponent>('@odx/angular/components/autocomplete::AutocompleteComponent');\n","import { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { OptionControl } from '@odx/angular/cdk/option-control';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { deferFn } from '@odx/angular/utils';\nimport { AUTOCOMPLETE_CONTROL } from '../../autocomplete.tokens';\n\n/**\n * Represents an option component for the autocomplete control.\n *\n * @template T - The type of the option value.\n */\n@CSSComponent('autocomplete-option')\n@Component({\n  standalone: true,\n  selector: 'odx-autocomplete-option',\n  imports: [CoreModule],\n  templateUrl: './autocomplete-option.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AutocompleteOptionComponent<T> extends OptionControl<T> {\n  protected readonly autocompleteControl = inject(AUTOCOMPLETE_CONTROL);\n\n  /**\n   * Sets the active styles for the option component.\n   */\n  public setActiveStyles(): void {\n    deferFn(() => {\n      this.isActive = true;\n      this.cdr.markForCheck();\n    });\n\n    if (this.autocompleteControl.isOpen) {\n      this.autocompleteControl.scrollOptionIntoView(this);\n    }\n  }\n\n  protected selectOption(): void {\n    this.autocompleteControl.selectOption(this);\n  }\n}\n","<ng-content />\n","import { Directive } from '@angular/core';\nimport { ReadonlyController, WithTabIndex } from '@odx/angular';\nimport { InputControlDirective } from '@odx/angular/cdk/custom-form-control';\nimport { CSSComponent } from '@odx/angular/internal';\n\n/**\n * Directive for controlling the input in an autocomplete component.\n * Extends the base InputControlDirective class.\n */\n@CSSComponent('autocomplete__control')\n@Directive({\n  standalone: true,\n  selector: 'input[odxAutocompleteControl]',\n  host: {\n    '[attr.readonly]': 'readonlyController?.readonly || null',\n  },\n  providers: [ReadonlyController.connect()],\n  hostDirectives: [WithTabIndex],\n})\nexport class AutocompleteInputControlDirective extends InputControlDirective {\n  protected readonly readonlyController = ReadonlyController.inject();\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ContentChildren,\n  forwardRef,\n  HostListener,\n  inject,\n  input,\n  QueryList,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ClickOutsideDirective } from '@odx/angular';\nimport { AutocompleteControl, ODX_SEARCH_FILTER_HOST } from '@odx/angular/cdk/autocomplete-control';\nimport { DropdownDirective } from '@odx/angular/components/dropdown';\nimport { LoadingSpinnerModule } from '@odx/angular/components/loading-spinner';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { deferFn } from '@odx/angular/utils';\nimport { filter, tap } from 'rxjs';\nimport { AUTOCOMPLETE_CONTROL } from './autocomplete.tokens';\nimport { AutocompleteOptionComponent } from './components';\nimport { AutocompleteInputControlDirective } from './directives';\n\n/**\n * Represents an autocomplete component that provides user interface for a dropdown list to select from as users type.\n * It extends `AutocompleteControl`, integrating custom logic for handling keyboard and mouse events,\n * managing the dropdown state, and updating the associated search field.\n *\n * @see {AutocompleteControl}\n *\n * @template T - The type of the value handled by the autocomplete.\n */\n@CSSComponent('autocomplete')\n@Component({\n  standalone: true,\n  selector: 'odx-autocomplete',\n  imports: [DropdownDirective, LoadingSpinnerModule, AutocompleteOptionComponent],\n  templateUrl: './autocomplete.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: AUTOCOMPLETE_CONTROL,\n      useExisting: forwardRef(() => AutocompleteComponent),\n    },\n    {\n      provide: ODX_SEARCH_FILTER_HOST,\n      useExisting: AUTOCOMPLETE_CONTROL,\n    },\n  ],\n  hostDirectives: [ClickOutsideDirective],\n})\nexport class AutocompleteComponent<T = unknown> extends AutocompleteControl<T | null> implements AfterViewInit {\n  private readonly defaultActiveOptionIndex = 0;\n  private patchValueFlag = false;\n  protected readonly clickOutsideDirective = inject(ClickOutsideDirective, { host: true });\n\n  /**\n   * The list of autocomplete options.\n   *\n   * @type {QueryList<AutocompleteOptionComponent<T>> | undefined}\n   */\n  @ContentChildren(AutocompleteOptionComponent, { descendants: true, emitDistinctChangesOnly: true })\n  public options?: QueryList<AutocompleteOptionComponent<T>>;\n\n  /** Text to display when no options are found.\n   *\n   * @type {string | null}\n   */\n  public notFoundText = input<string | null>(null);\n\n  /**\n   * The search field input control.\n   *\n   * @type {AutocompleteInputControlDirective | undefined}\n   */\n  @ContentChild(AutocompleteInputControlDirective)\n  public searchField?: AutocompleteInputControlDirective;\n\n  public override ngAfterViewInit(): void {\n    if (!this.options) return;\n    if (this.value) this.updateSearchField(this.value);\n    this.initKeyManager(this.options.toArray());\n    this.handleQueryListOption(this.options);\n    this.handleSearchFieldChanges();\n    this.handleClickOutside();\n  }\n\n  /**\n   * Selects an option, updates the value, updates the search field display,\n   * emits the selected value, and closes the dropdown.\n   *\n   * @param {AutocompleteOptionComponent<T> | null} option - The option component to select. If the option is undefined or its value is undefined,\n   * no action is taken.\n   */\n  public selectOption(option?: AutocompleteOptionComponent<T> | null): void {\n    if (!option?.value) return;\n\n    this.updateValue(option.value);\n    this.updateSearchField(option.value);\n\n    this.optionSelected.emit(option.value);\n\n    this.closeDropdown();\n  }\n\n  /**\n   * Resets the search field to its initial state and updates the value of the autocomplete\n   * to an empty string or initial value.\n   */\n  public resetSearchField(): void {\n    this.updateValue('' as T);\n    this.searchField?.reset();\n  }\n\n  protected handleQueryListOption(options: QueryList<AutocompleteOptionComponent<T>>): void {\n    options.changes\n      .pipe(\n        tap(() => deferFn(() => this.updateDropdownState())),\n        filter(() => this.isOpen),\n        this.takeUntilDestroyed(),\n      )\n      .subscribe(() => {\n        deferFn(() => this.activateSelectedOption());\n      });\n  }\n\n  protected handleSearchFieldChanges(): void {\n    this.searchField?.valueChange$.pipe(this.takeUntilDestroyed()).subscribe(() => this.triggerControllerChange());\n  }\n\n  protected handleClickOutside(): void {\n    this.clickOutsideDirective.odxClickOutside.pipe(this.takeUntilDestroyed()).subscribe(() => this.clickOutside());\n  }\n\n  protected clickOutside(): void {\n    this.closeDropdown();\n    this.blurSelectSearchField();\n  }\n\n  protected updateDropdownState(): void {\n    if (this.patchValueFlag) {\n      this.patchValueFlag = false;\n      return;\n    }\n    if (!this.isOpen && (this.hasOptions || !!this.notFoundText())) {\n      this.openDropdown();\n      return;\n    }\n    if (this.isOpen && !this.hasOptions && !this.notFoundText()) {\n      this.closeDropdown();\n    }\n  }\n\n  @HostListener('click')\n  protected handleClickEvent() {\n    if (this.isLoading && this.isOpen) {\n      this.closeDropdown();\n      this.blurSelectSearchField();\n      return;\n    }\n\n    if (this.isReadonly || this.isDisabled) return;\n\n    if (!this.isOpen && this.hasOptions) {\n      this.openDropdown();\n    }\n  }\n\n  @HostListener('keydown', ['$event'])\n  protected async handleKeyboardEvent(event: KeyboardEvent) {\n    if (this.isReadonly || this.isDisabled) return;\n\n    if (event.key === 'Escape') {\n      this.resetSearchField();\n      this.blurSelectSearchField();\n      return;\n    }\n\n    if (this.isOpen && this.hasOptions) {\n      if (event.key === 'Enter' || event.key === 'Tab') {\n        event.preventDefault();\n        event.stopImmediatePropagation();\n        this.selectOption(this.keyManager?.activeItem as AutocompleteOptionComponent<T> | undefined);\n        return;\n      }\n    }\n\n    if (event.key === 'Enter') {\n      this.optionSelected.emit((this.value ?? '') as T);\n      return;\n    }\n\n    if (!this.isOpen && event.key === 'Tab') {\n      return;\n    }\n\n    this.keyManager?.onKeydown(event);\n  }\n\n  protected activateSelectedOption(): void {\n    this.keyManager?.setActiveItem(this.defaultActiveOptionIndex);\n  }\n\n  protected override onDropdownClosed(): void {\n    super.onDropdownClosed();\n    !this.searchField?.nativeElementValue && this.blurSelectSearchField();\n  }\n\n  private updateSearchField(value: T): void {\n    if (!this.searchField) return;\n    this.patchValueFlag = true;\n    this.searchField.nativeElementValue = this.stringify?.(value) ?? (value as string);\n  }\n\n  private blurSelectSearchField(): void {\n    this.searchField?.blur();\n  }\n}\n","<div\n  aria-haspopup=\"listbox\"\n  class=\"odx-autocomplete__trigger\"\n  [odxDropdown]=\"dropdownContent\"\n  [odxDropdownDisabled]=\"isDisabled || isReadonly\"\n  [odxDropdownOptions]=\"{ matchReferenceWidth: true, offset: 4, outerPadding: 10, position: 'bottom-start' }\"\n  [odxDropdownReferenceElement]=\"dropdownReferenceElement\"\n  [odxDropdownShowLoader]=\"isLoading\"\n  [odxDropdownOpenTrigger]=\"[]\"\n  [odxDropdownClickOutsideActive]=\"false\"\n  (odxDropdownBeforeOpen)=\"onDropdownOpen()\"\n  (odxDropdownAfterOpen)=\"onDropdownOpened()\"\n  (odxDropdownBeforeClose)=\"onDropdownClose()\"\n  (odxDropdownAfterClose)=\"onDropdownClosed()\"\n>\n  <ng-content select=\"input[odxAutocompleteControl]\" />\n</div>\n<ng-template #dropdownContent>\n  <div class=\"odx-dropdown__option-list\" role=\"listbox\">\n    @if (hasOptions) {\n      <ng-content />\n    } @else if (!!notFoundText()) {\n      <odx-autocomplete-option class=\"is-disabled\">{{ notFoundText() }}</odx-autocomplete-option>\n    }\n  </div>\n</ng-template>\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { BaseSearchFilterPipe } from '@odx/angular/cdk/autocomplete-control';\n\n@Pipe({\n  pure: false,\n  name: 'odxAutocompleteSearchFilter',\n  standalone: true,\n})\nexport class AutocompleteSearchFilterPipe extends BaseSearchFilterPipe implements PipeTransform {}\n","import { NgModule } from '@angular/core';\nimport { CoreModule } from '@odx/angular';\nimport { AutocompleteComponent } from './autocomplete.component';\nimport { AutocompleteOptionComponent } from './components';\nimport { AutocompleteInputControlDirective } from './directives';\nimport { AutocompleteSearchFilterPipe } from './pipes';\n\nconst modules = [AutocompleteComponent, AutocompleteInputControlDirective, AutocompleteSearchFilterPipe, AutocompleteOptionComponent];\n\n@NgModule({\n  imports: modules,\n  exports: [CoreModule, ...modules],\n})\nexport class AutocompleteModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/odx-angular-components-tab-bar.mjs

@@ -1,16 +1,18 @@
 import { __decorate, __metadata } from 'tslib';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, EventEmitter, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostListener, ChangeDetectorRef, numberAttribute, forwardRef, ViewChild, ViewChildren, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, booleanAttribute, output, Component, ViewEncapsulation, ChangeDetectionStrategy, contentChildren, computed, Injector, viewChild, model, effect, forwardRef, NgModule } from '@angular/core';
 import { RouterLinkActive } from '@angular/router';
 import { DisabledController, CoreModule } from '@odx/angular';
 import { IconComponent } from '@odx/angular/components/icon';
-import { CSSComponent, CSSModifier } from '@odx/angular/internal';
-import { untilDestroyed, deferFn, injectElement, applyStyles, cssTranslate, px } from '@odx/angular/utils';
-import { filter, BehaviorSubject, merge, debounceTime, tap, fromEvent } from 'rxjs';
+import { CSSComponent } from '@odx/angular/internal';
+import { untilDestroyed, deferFn, injectElement } from '@odx/angular/utils';
+import { filter, merge, tap, skip, distinctUntilChanged } from 'rxjs';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { toObservable } from '@angular/core/rxjs-interop';
 import { ActiveIndicatorDirective } from '@odx/angular/cdk/active-indicator';
-import { fromQueryList, fromElementResize$ } from '@odx/angular/rxjs';
+import { ScrollableService } from '@odx/angular/cdk/scrollable';
+import { fromElementResize$ } from '@odx/angular/rxjs';
 
 const TAB_BAR = new InjectionToken('tabBar');
 
@@ -40,13 +42,13 @@ let TabBarItemComponent = class TabBarItemComponent {
          * @type {boolean}
          * @default false
          */
-        this.closable = false;
+        this.closable = input(false, { transform: booleanAttribute });
         /**
          * Event emitter that fires when the tab is closed. It emits the instance of the tab item component.
          *
          * @emits {TabBarItemComponent}
          */
-        this.tabClose = new EventEmitter();
+        this.tabClose = output();
     }
     get disabled() {
         return !!this.disabledController?.disabled;
@@ -77,13 +79,13 @@ let TabBarItemComponent = class TabBarItemComponent {
     }
     handleClose(event) {
         event.stopPropagation();
-        if (this.disabled || !this.closable)
+        if (this.disabled || !this.closable())
             return;
         this.tabBar.removeItem(this);
         this.tabClose.emit(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabBarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TabBarItemComponent, isStandalone: true, selector: "odx-tab-bar-item", inputs: { closable: ["closable", "closable", booleanAttribute] }, outputs: { tabClose: "tabClose" }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()" }, properties: { "class.is-disabled": "disabled", "class.is-active": "isActive", "attr.aria-selected": "isActive", "class.is-closable": "closable" } }, providers: [DisabledController.connect()], ngImport: i0, template: "<ng-content select=\"odx-icon\" />\n<div class=\"odx-tab-bar-item__label\"><ng-content /></div>\n@if (closable) {\n  <odx-icon name=\"close\" iconSet=\"core\" size=\"small\" (click)=\"handleClose($event)\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TabBarItemComponent, isStandalone: true, selector: "odx-tab-bar-item", inputs: { closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClose: "tabClose" }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()" }, properties: { "class.is-disabled": "disabled", "class.is-active": "isActive", "attr.aria-selected": "isActive", "class.is-closable": "closable()" } }, providers: [DisabledController.connect()], ngImport: i0, template: "<ng-content select=\"odx-icon\" />\n<div class=\"odx-tab-bar-item__label\"><ng-content /></div>\n@if (closable()) {\n  <odx-icon name=\"close\" iconSet=\"core\" size=\"small\" (click)=\"handleClose($event)\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 TabBarItemComponent = __decorate([
     CSSComponent('tab-bar-item')
@@ -94,18 +96,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[class.is-disabled]': 'disabled',
                         '[class.is-active]': 'isActive',
                         '[attr.aria-selected]': 'isActive',
-                        '[class.is-closable]': 'closable',
+                        '[class.is-closable]': 'closable()',
                         role: 'tab',
-                    }, template: "<ng-content select=\"odx-icon\" />\n<div class=\"odx-tab-bar-item__label\"><ng-content /></div>\n@if (closable) {\n  <odx-icon name=\"close\" iconSet=\"core\" size=\"small\" (click)=\"handleClose($event)\" />\n}\n" }]
-        }], propDecorators: { closable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabClose: [{
-                type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+                        '(click)': 'onClick()',
+                    }, template: "<ng-content select=\"odx-icon\" />\n<div class=\"odx-tab-bar-item__label\"><ng-content /></div>\n@if (closable()) {\n  <odx-icon name=\"close\" iconSet=\"core\" size=\"small\" (click)=\"handleClose($event)\" />\n}\n" }]
+        }] });
 
 /**
  * `TabBarComponent` creates a dynamic and accessible tab bar interface,
@@ -119,23 +114,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  */
 let TabBarComponent = class TabBarComponent {
     constructor() {
-        this.changeDetector = inject(ChangeDetectorRef);
         this.takeUntilDestroyed = untilDestroyed();
-        this.selectedIndex$$ = new BehaviorSubject(0);
-        this.activeItem = null;
+        this.scrollableService = inject(ScrollableService);
+        this.nextTab = this.scrollableService.nextItem;
+        this.prevTab = this.scrollableService.prevItem;
+        this.tabs = contentChildren(TabBarItemComponent);
+        this.activeItem = computed(() => this.tabs().at(this.selectedIndex()) ?? null);
+        this.keyManager = new ActiveDescendantKeyManager(this.tabs, inject(Injector))
+            .withWrap()
+            .withHomeAndEnd()
+            .withHorizontalOrientation('ltr')
+            .withVerticalOrientation(false);
+        this.scrollContainerElement = viewChild.required('scrollContainer');
         this.element = injectElement();
         /**
-         * Indicates whether the tab bar has overflowed to the left.
-         *
-         * @type {boolean}
-         */
-        this.overflowLeft = false;
-        /**
-         * Indicates whether the tab bar has overflowed to the right.
+         * Index of the currently selected tab. Use this property to programmatically
+         * change the active tab. It responds to changes by updating the active state of the corresponding
+         * tab item and adjusting the view if necessary.
          *
-         * @type {boolean}
+         * @type {number}
+         * @example
+         * Programmatically select the second tab (index starts from 0):
+         * ```html
+         * <odx-tab-bar [selectedIndex]="1"></odx-tab-bar>
+         * ```
          */
-        this.overflowRight = false;
+        this.selectedIndex = model(0);
         /**
          * An EventEmitter that emits whenever a new tab is selected. It provides the `TabChangeEvent`
          * which contains the index of the newly selected tab and the instance of the corresponding
@@ -153,129 +157,79 @@ let TabBarComponent = class TabBarComponent {
          * }
          * ```
          */
-        this.selectedTabChanged = new EventEmitter();
-    }
-    /**
-     * Gets or sets the index of the currently selected tab. Use this property to programmatically
-     * change the active tab. It responds to changes by updating the active state of the corresponding
-     * tab item and adjusting the view if necessary.
-     *
-     * @type {number}
-     * @example
-     * Programmatically select the second tab (index starts from 0):
-     * ```html
-     * <odx-tab-bar [selectedIndex]="1"></odx-tab-bar>
-     * ```
-     */
-    set selectedIndex(value) {
-        this.selectedIndex$$.next(value);
-    }
-    ngAfterViewInit() {
-        this.keyManager = new ActiveDescendantKeyManager(this.tabs).withWrap().withHomeAndEnd().withHorizontalOrientation('ltr').withVerticalOrientation(false);
-        const updatePanelPosition$ = merge(this.selectedTabChanged, fromQueryList(this.tabs), fromElementResize$(this.element.nativeElement)).pipe(debounceTime(0), tap(() => this.updatePanelPosition()));
-        const updateActionVisibility$ = fromEvent(this.tabBarPanelElement.nativeElement, 'transitionend').pipe(tap(({ target }) => target === this.tabBarPanelElement.nativeElement && this.updateActionVisbility()));
-        const activeItemChange$ = merge(this.keyManager.change.pipe(tap(() => this.activeItemChange())), this.selectedIndex$$.pipe(tap((index) => this.keyManager?.setActiveItem(index))));
-        merge(activeItemChange$, updatePanelPosition$, updateActionVisibility$).pipe(this.takeUntilDestroyed()).subscribe();
-        this.tabs.changes.pipe(this.takeUntilDestroyed()).subscribe(() => this.selectedIndex$$.next(this.selectedIndex$$.value));
+        this.selectedTabChanged = output();
+        const tabState = computed(() => ({
+            selectedIndex: this.selectedIndex(),
+            selectedTab: this.activeItem(),
+        }));
+        merge(this.keyManager.change.pipe(tap((index) => this.selectedIndex.set(index ?? -1))), fromElementResize$(this.element.nativeElement, 600).pipe(tap(() => this.scrollableService.scrollActiveItemIntoView(this.activeItem()?.element.nativeElement ?? null))), toObservable(tabState).pipe(skip(1), distinctUntilChanged((a, b) => a.selectedIndex === b.selectedIndex), filter(({ selectedTab }) => !selectedTab?.disabled), tap((state) => {
+            this.selectedTabChanged.emit(state);
+            this.scrollableService.scrollActiveItemIntoView(state.selectedTab?.element.nativeElement ?? null);
+        })))
+            .pipe(this.takeUntilDestroyed())
+            .subscribe();
+        effect(() => {
+            this.keyManager.setActiveItem(this.selectedIndex());
+        }, { allowSignalWrites: true });
+        effect(() => {
+            this.scrollableService.observe(this.scrollContainerElement(), this.tabs());
+        });
     }
     /**
-     * Activates the specified tab item.
+     * Activates the specified tab item, making it the currently selected tab.
+     * If the item is already active, no action is taken.
      *
-     * @param {TabBarItemComponent | null} item - The tab item to activate. If not provided or null, the active item will be cleared.
-     *
-     * @example
-     * ```ts
-     * // Activate the first tab item
-     * tabBar.activateItem(tabItems[0]);
-     *
-     * // Clear the active item
-     * tabBar.activateItem(null);
-     * ```
+     * @param {TabBarItemComponent | null} item - The tab item to activate.
      */
     activateItem(item) {
-        if (item === this.activeItem)
+        if (item === this.keyManager?.activeItem)
             return;
-        const selectedIndex = item ? this.tabs.toArray().indexOf(item) : -1;
-        this.keyManager?.setActiveItem(selectedIndex);
+        const selectedIndex = item ? this.tabs().indexOf(item) : -1;
+        this.selectedIndex.set(selectedIndex);
     }
     /**
-     * Removes the specified item from the tab bar.
-     * If the removed item is the active item, it sets the previous item as the new active item.
+     * Fires when the specified tab item is removed from the tab bar.
+     * If the item is currently active, the previous tab is activated.
      *
-     * @param {TabBarItemComponent} item - The item to be removed from the tab bar.
+     * @param {TabBarItemComponent} item - The tab item to remove.
      */
     removeItem(item) {
-        if (this.activeItem !== item)
+        if (this.keyManager?.activeItem !== item)
             return;
-        deferFn(() => this.keyManager?.setPreviousItemActive());
+        this.keyManager?.setPreviousItemActive();
     }
     onKeydown(event) {
         this.keyManager?.onKeydown(event);
     }
-    updatePanelPosition() {
-        const activeElement = this.activeItem?.element.nativeElement;
-        if (!activeElement)
+    onFocused() {
+        const activeItem = this.activeItem()?.element.nativeElement;
+        if (!activeItem)
             return;
-        const panelRect = this.tabBarPanelElement.nativeElement.getBoundingClientRect();
-        const tabBarRect = this.element.nativeElement.getBoundingClientRect();
-        const maxPanelPositionX = Math.floor(tabBarRect.width - panelRect.width);
-        const panelPositionX = tabBarRect.width / 2 - activeElement.offsetLeft - activeElement.offsetWidth / 2;
-        const positionX = Math.min(0, Math.max(panelPositionX, maxPanelPositionX));
-        applyStyles(this.tabBarPanelElement.nativeElement, {
-            transform: cssTranslate(px(positionX), 0),
-        });
-        this.updateActionVisbility();
-    }
-    updateActionVisbility() {
-        const panelRect = this.tabBarPanelElement.nativeElement.getBoundingClientRect();
-        const tabBarRect = this.element.nativeElement.getBoundingClientRect();
-        this.overflowLeft = panelRect.left < tabBarRect.left;
-        this.overflowRight = panelRect.right > tabBarRect.right;
-        this.changeDetector.detectChanges();
+        if (this.scrollableService.visibleItems().includes(activeItem))
+            return;
+        this.scrollableService.scrollActiveItemIntoView(activeItem);
     }
-    activeItemChange() {
-        const { activeItemIndex, activeItem } = this.keyManager ?? {};
-        this.activeItem = activeItem ?? null;
-        this.selectedTabChanged.emit({ selectedIndex: activeItemIndex ?? -1, selectedTab: this.keyManager?.activeItem ?? null });
+    scrollTabs(direction = 1) {
+        this.scrollableService.scroll(direction);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: TabBarComponent, isStandalone: true, selector: "odx-tab-bar", inputs: { selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectedTabChanged: "selectedTabChanged" }, host: { attributes: { "role": "tabpanel", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)" } }, providers: [{ provide: TAB_BAR, useExisting: forwardRef(() => TabBarComponent) }], queries: [{ propertyName: "tabs", predicate: TabBarItemComponent }], viewQueries: [{ propertyName: "tabBarPanelElement", first: true, predicate: ["tabBarPanel"], descendants: true }, { propertyName: "tabActionElements", predicate: ["tabAction"], descendants: true }], ngImport: i0, template: "<button\n  #tabAction\n  class=\"odx-tab-bar__action odx-tab-bar__action--prev\"\n  [class.is-active]=\"overflowLeft\"\n  (click)=\"keyManager?.setPreviousItemActive()\"\n  tabindex=\"-1\"\n>\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-left\" iconSet=\"core\" />\n</button>\n<div class=\"odx-tab-bar__inner\">\n  <div class=\"odx-tab-bar__panel\" role=\"tablist\" #tabBarPanel>\n    <ng-content />\n    <div class=\"odx-tab-bar__indicator\" [odxActiveIndicator]=\"activeItem?.element?.nativeElement\" odxActiveIndicatorPosition=\"start\"></div>\n  </div>\n</div>\n<button\n  #tabAction\n  class=\"odx-tab-bar__action odx-tab-bar__action--next\"\n  [class.is-active]=\"overflowRight\"\n  (click)=\"keyManager?.setNextItemActive()\"\n  tabindex=\"-1\"\n>\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-right\" iconSet=\"core\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "directive", type: ActiveIndicatorDirective, selector: "[odxActiveIndicator]", inputs: ["odxActiveIndicator", "odxActiveIndicatorParent", "odxActiveIndicatorDirection", "odxActiveIndicatorPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: TabBarComponent, isStandalone: true, selector: "odx-tab-bar", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedTabChanged: "selectedTabChanged" }, host: { attributes: { "role": "tabpanel", "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "focus": "onFocused()" }, properties: { "class.odx-tab-bar--overflow-left": "!!prevTab()", "class.odx-tab-bar--overflow-right": "!!nextTab()" } }, providers: [{ provide: TAB_BAR, useExisting: forwardRef(() => TabBarComponent) }, ScrollableService], queries: [{ propertyName: "tabs", predicate: TabBarItemComponent, isSignal: true }], viewQueries: [{ propertyName: "scrollContainerElement", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #tabAction class=\"odx-tab-bar__action odx-tab-bar__action--prev\" [class.is-active]=\"!!prevTab()\" (click)=\"scrollTabs(-1)\" tabindex=\"-1\">\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-left\" iconSet=\"core\" />\n</button>\n<div class=\"odx-tab-bar__inner\" #scrollContainer tabindex=\"-1\">\n  <div class=\"odx-tab-bar__panel\" role=\"tablist\" #tabBarPanel>\n    <ng-content />\n    <div class=\"odx-tab-bar__indicator\" [odxActiveIndicator]=\"activeItem()?.element?.nativeElement\" odxActiveIndicatorPosition=\"start\"></div>\n  </div>\n</div>\n<button #tabAction class=\"odx-tab-bar__action odx-tab-bar__action--next\" [class.is-active]=\"!!nextTab()\" (click)=\"scrollTabs()\" tabindex=\"-1\">\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-right\" iconSet=\"core\" />\n</button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "directive", type: ActiveIndicatorDirective, selector: "[odxActiveIndicator]", inputs: ["odxActiveIndicator", "odxActiveIndicatorParent", "odxActiveIndicatorDirection", "odxActiveIndicatorPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
-__decorate([
-    CSSModifier(),
-    __metadata("design:type", Object)
-], TabBarComponent.prototype, "overflowLeft", void 0);
-__decorate([
-    CSSModifier(),
-    __metadata("design:type", Object)
-], TabBarComponent.prototype, "overflowRight", void 0);
 TabBarComponent = __decorate([
-    CSSComponent('tab-bar')
+    CSSComponent('tab-bar'),
+    __metadata("design:paramtypes", [])
 ], TabBarComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'odx-tab-bar', standalone: true, imports: [CommonModule, IconComponent, ActiveIndicatorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TAB_BAR, useExisting: forwardRef(() => TabBarComponent) }], host: {
+            args: [{ selector: 'odx-tab-bar', standalone: true, imports: [CommonModule, IconComponent, ActiveIndicatorDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: TAB_BAR, useExisting: forwardRef(() => TabBarComponent) }, ScrollableService], host: {
                         role: 'tabpanel',
                         tabindex: '0',
-                    }, template: "<button\n  #tabAction\n  class=\"odx-tab-bar__action odx-tab-bar__action--prev\"\n  [class.is-active]=\"overflowLeft\"\n  (click)=\"keyManager?.setPreviousItemActive()\"\n  tabindex=\"-1\"\n>\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-left\" iconSet=\"core\" />\n</button>\n<div class=\"odx-tab-bar__inner\">\n  <div class=\"odx-tab-bar__panel\" role=\"tablist\" #tabBarPanel>\n    <ng-content />\n    <div class=\"odx-tab-bar__indicator\" [odxActiveIndicator]=\"activeItem?.element?.nativeElement\" odxActiveIndicatorPosition=\"start\"></div>\n  </div>\n</div>\n<button\n  #tabAction\n  class=\"odx-tab-bar__action odx-tab-bar__action--next\"\n  [class.is-active]=\"overflowRight\"\n  (click)=\"keyManager?.setNextItemActive()\"\n  tabindex=\"-1\"\n>\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-right\" iconSet=\"core\" />\n</button>\n" }]
-        }], propDecorators: { tabBarPanelElement: [{
-                type: ViewChild,
-                args: ['tabBarPanel']
-            }], tabActionElements: [{
-                type: ViewChildren,
-                args: ['tabAction']
-            }], tabs: [{
-                type: ContentChildren,
-                args: [TabBarItemComponent]
-            }], overflowLeft: [], overflowRight: [], selectedIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], selectedTabChanged: [{
-                type: Output
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+                        '[class.odx-tab-bar--overflow-left]': '!!prevTab()',
+                        '[class.odx-tab-bar--overflow-right]': '!!nextTab()',
+                        '(keydown)': 'onKeydown($event)',
+                        '(focus)': 'onFocused()',
+                    }, template: "<button #tabAction class=\"odx-tab-bar__action odx-tab-bar__action--prev\" [class.is-active]=\"!!prevTab()\" (click)=\"scrollTabs(-1)\" tabindex=\"-1\">\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-left\" iconSet=\"core\" />\n</button>\n<div class=\"odx-tab-bar__inner\" #scrollContainer tabindex=\"-1\">\n  <div class=\"odx-tab-bar__panel\" role=\"tablist\" #tabBarPanel>\n    <ng-content />\n    <div class=\"odx-tab-bar__indicator\" [odxActiveIndicator]=\"activeItem()?.element?.nativeElement\" odxActiveIndicatorPosition=\"start\"></div>\n  </div>\n</div>\n<button #tabAction class=\"odx-tab-bar__action odx-tab-bar__action--next\" [class.is-active]=\"!!nextTab()\" (click)=\"scrollTabs()\" tabindex=\"-1\">\n  <odx-icon class=\"tab-bar-action-icon\" name=\"chevron-right\" iconSet=\"core\" />\n</button>\n" }]
+        }], ctorParameters: () => [] });
 
 const modules = [TabBarComponent, TabBarItemComponent];
 class TabBarModule {