@odx/angular 12.19.1 → 12.20.0

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

@@ -5,9 +5,7 @@ import { detectControllerChanges, DisabledController, ReadonlyController } from
 import { CustomFormControl, ControlDirective } from '@odx/angular/cdk/custom-form-control';
 import { IconComponent } from '@odx/angular/components/icon';
 import { CSSComponent } from '@odx/angular/internal';
-import { fromEvents } from '@odx/angular/rxjs';
-import { untilDestroyed, injectElement } from '@odx/angular/utils';
-import { filter, tap, switchMap, NEVER, timer, startWith } from 'rxjs';
+import { injectElement } from '@odx/angular/utils';
 
 /**
  * SpinboxComponent is a custom form control for numeric input which allows users to increment and decrement
@@ -22,22 +20,21 @@ let SpinboxComponent = class SpinboxComponent extends CustomFormControl {
     }
     constructor() {
         super(0);
-        this.takeUntilDestroyed = untilDestroyed();
         this.element = injectElement();
         /**
          * The maximum allowable value for the spinbox.
          *
          * @type {number}
-         * @default Infinity
+         * @default Number.POSITIVE_INFINITY
          */
-        this.max = Infinity;
+        this.max = Number.POSITIVE_INFINITY;
         /**
          * The minimum allowable value for the spinbox.
          *
          * @type {number}
-         * @default -Infinity
+         * @default Number.NEGATIVE_INFINITY
          */
-        this.min = -Infinity;
+        this.min = Number.NEGATIVE_INFINITY;
         /**
          * The value increment or decrement step for the spinbox.
          *
@@ -48,15 +45,25 @@ let SpinboxComponent = class SpinboxComponent extends CustomFormControl {
         detectControllerChanges(this).subscribe();
     }
     ngAfterViewInit() {
-        this.registerPressHold(this.decrementButton).subscribe(() => {
+        this.destroyDecrementListener = this.pressAndHold(this.decrementButton.nativeElement, () => {
             this.inputElement?.stepDown();
-            this.onInputChange();
+            this.updateValue(numberAttribute(this.inputElement.value));
         });
-        this.registerPressHold(this.incrementButton).subscribe(() => {
+        this.destroyIncrementListener = this.pressAndHold(this.incrementButton.nativeElement, () => {
             this.inputElement?.stepUp();
-            this.onInputChange();
+            this.updateValue(numberAttribute(this.inputElement.value));
         });
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.destroyDecrementListener?.();
+        this.destroyIncrementListener?.();
+    }
+    updateValue(value) {
+        if (this.value === value)
+            return;
+        super.updateValue(value);
+    }
     maxSteps({ code }) {
         if (code === 'End' && this.min !== -Infinity) {
             this.updateValue(this.min);
@@ -65,21 +72,50 @@ let SpinboxComponent = class SpinboxComponent extends CustomFormControl {
             this.updateValue(this.max);
         }
     }
-    checkValue() {
+    checkAndUpdate() {
         const value = numberAttribute(this.inputElement.value);
-        this.updateValue(value < this.min ? this.min : value > this.max ? this.max : value);
-    }
-    onInputChange() {
-        this.updateValue(numberAttribute(this.inputElement.value));
+        const clampedValue = Math.min(this.max, Math.max(this.min, value));
+        this.inputElement.value = clampedValue.toString();
+        this.updateValue(clampedValue);
     }
-    registerPressHold(target) {
-        return fromEvents(target.nativeElement, 'keydown', 'mousedown', 'mouseup', 'keyup').pipe(filter((event) => event?.type !== 'keydown' || ['Space', 'Enter'].includes(event.code)), tap((event) => {
-            event.preventDefault();
-            event.stopPropagation();
-        }), switchMap(({ type }) => (['mouseup', 'keyup'].includes(type) ? NEVER : timer(500, 100).pipe(startWith(undefined)))), this.takeUntilDestroyed());
+    pressAndHold(element, handler, interval = 200) {
+        let timerId;
+        const clearTimer = () => {
+            clearInterval(timerId);
+            timerId = undefined;
+        };
+        const start = () => {
+            handler();
+            timerId = window.setInterval(handler, interval);
+        };
+        const handleKeyDown = (event) => {
+            if ((event.code === 'Space' || event.code === 'Enter') && timerId === undefined) {
+                if (event.code === 'Space') {
+                    event.preventDefault(); // blocks scrolling
+                }
+                start();
+            }
+        };
+        const handleKeyUp = (event) => {
+            if (event.code === 'Space' || event.code === 'Enter') {
+                clearTimer();
+            }
+        };
+        element.addEventListener('mousedown', start);
+        element.addEventListener('mouseup', clearTimer);
+        element.addEventListener('mouseout', clearTimer);
+        element.addEventListener('keydown', handleKeyDown);
+        element.addEventListener('keyup', handleKeyUp);
+        return () => {
+            element.removeEventListener('mousedown', start);
+            element.removeEventListener('mouseup', clearTimer);
+            element.removeEventListener('mouseout', clearTimer);
+            element.removeEventListener('keydown', handleKeyDown);
+            element.removeEventListener('keyup', handleKeyUp);
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: SpinboxComponent, isStandalone: true, selector: "odx-spinbox", inputs: { max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], step: ["step", "step", numberAttribute] }, providers: [DisabledController.connect(), ReadonlyController.connect()], viewQueries: [{ propertyName: "decrementButton", first: true, predicate: ["decrementButton"], descendants: true }, { propertyName: "incrementButton", first: true, predicate: ["incrementButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #decrementButton><odx-icon name=\"minus\" /></button>\n<input\n  odxControl\n  class=\"odx-spinbox__input\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"isReadonly\"\n  type=\"number\"\n  [value]=\"value\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  (keydown)=\"maxSteps($event)\"\n  (change)=\"onInputChange()\"\n  (blur)=\"checkValue()\"\n/>\n<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #incrementButton><odx-icon name=\"plus\" /></button>\n", dependencies: [{ kind: "directive", type: ControlDirective, selector: "[odxControl]", exportAs: ["odxControl"] }, { 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: "16.1.0", version: "18.2.13", type: SpinboxComponent, isStandalone: true, selector: "odx-spinbox", inputs: { max: ["max", "max", numberAttribute], min: ["min", "min", numberAttribute], step: ["step", "step", numberAttribute] }, providers: [DisabledController.connect(), ReadonlyController.connect()], viewQueries: [{ propertyName: "decrementButton", first: true, predicate: ["decrementButton"], descendants: true }, { propertyName: "incrementButton", first: true, predicate: ["incrementButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #decrementButton><odx-icon name=\"minus\" /></button>\n<input\n  odxControl\n  class=\"odx-spinbox__input\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"isReadonly\"\n  type=\"number\"\n  [value]=\"value\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  (keydown)=\"maxSteps($event)\"\n  (change)=\"checkAndUpdate()\"\n  (blur)=\"checkAndUpdate()\"\n/>\n<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #incrementButton><odx-icon name=\"plus\" /></button>\n", dependencies: [{ kind: "directive", type: ControlDirective, selector: "[odxControl]", exportAs: ["odxControl"] }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 SpinboxComponent = __decorate([
     CSSComponent('spinbox'),
@@ -87,7 +123,7 @@ SpinboxComponent = __decorate([
 ], SpinboxComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinboxComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-spinbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ControlDirective, IconComponent], providers: [DisabledController.connect(), ReadonlyController.connect()], template: "<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #decrementButton><odx-icon name=\"minus\" /></button>\n<input\n  odxControl\n  class=\"odx-spinbox__input\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"isReadonly\"\n  type=\"number\"\n  [value]=\"value\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  (keydown)=\"maxSteps($event)\"\n  (change)=\"onInputChange()\"\n  (blur)=\"checkValue()\"\n/>\n<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #incrementButton><odx-icon name=\"plus\" /></button>\n" }]
+            args: [{ standalone: true, selector: 'odx-spinbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ControlDirective, IconComponent], providers: [DisabledController.connect(), ReadonlyController.connect()], template: "<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #decrementButton><odx-icon name=\"minus\" /></button>\n<input\n  odxControl\n  class=\"odx-spinbox__input\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"isReadonly\"\n  type=\"number\"\n  [value]=\"value\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  (keydown)=\"maxSteps($event)\"\n  (change)=\"checkAndUpdate()\"\n  (blur)=\"checkAndUpdate()\"\n/>\n<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #incrementButton><odx-icon name=\"plus\" /></button>\n" }]
         }], ctorParameters: () => [], propDecorators: { decrementButton: [{
                 type: ViewChild,
                 args: ['decrementButton']

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

@@ -1 +1 @@
-{"version":3,"file":"odx-angular-components-spinbox.mjs","sources":["../../../../libs/angular/components/spinbox/src/lib/spinbox.component.ts","../../../../libs/angular/components/spinbox/src/lib/spinbox.component.html","../../../../libs/angular/components/spinbox/src/odx-angular-components-spinbox.ts"],"sourcesContent":["import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, numberAttribute, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { detectControllerChanges, DisabledController, ReadonlyController } from '@odx/angular';\nimport { ControlDirective, CustomFormControl } from '@odx/angular/cdk/custom-form-control';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { fromEvents } from '@odx/angular/rxjs';\nimport { injectElement, untilDestroyed } from '@odx/angular/utils';\nimport { filter, NEVER, Observable, startWith, switchMap, tap, timer } from 'rxjs';\n\n/**\n * SpinboxComponent is a custom form control for numeric input which allows users to increment and decrement\n * the value using corresponding buttons. It supports keyboard navigation and automatic boundary checks for the values.\n *  Extends CustomFormControl to provide additional behavior.\n *\n * @see {CustomFormControl}\n */\n@CSSComponent('spinbox')\n@Component({\n  standalone: true,\n  selector: 'odx-spinbox',\n  templateUrl: 'spinbox.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [ControlDirective, IconComponent],\n  providers: [DisabledController.connect(), ReadonlyController.connect()],\n})\nexport class SpinboxComponent extends CustomFormControl<number> implements AfterViewInit {\n  private readonly takeUntilDestroyed = untilDestroyed();\n\n  private get inputElement(): HTMLInputElement {\n    return this.control?.element.nativeElement as HTMLInputElement;\n  }\n\n  @ViewChild('decrementButton')\n  protected decrementButton!: ElementRef<HTMLButtonElement>;\n\n  @ViewChild('incrementButton')\n  protected incrementButton!: ElementRef<HTMLButtonElement>;\n\n  public readonly element = injectElement();\n\n  /**\n   * The maximum allowable value for the spinbox.\n   *\n   * @type {number}\n   * @default Infinity\n   */\n  @Input({ transform: numberAttribute })\n  public max = Infinity;\n\n  /**\n   * The minimum allowable value for the spinbox.\n   *\n   * @type {number}\n   * @default -Infinity\n   */\n  @Input({ transform: numberAttribute })\n  public min = -Infinity;\n\n  /**\n   * The value increment or decrement step for the spinbox.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input({ transform: numberAttribute })\n  public step = 1;\n\n  constructor() {\n    super(0);\n    detectControllerChanges(this).subscribe();\n  }\n\n  public ngAfterViewInit(): void {\n    this.registerPressHold(this.decrementButton).subscribe(() => {\n      this.inputElement?.stepDown();\n      this.onInputChange();\n    });\n    this.registerPressHold(this.incrementButton).subscribe(() => {\n      this.inputElement?.stepUp();\n      this.onInputChange();\n    });\n  }\n\n  protected maxSteps({ code }: KeyboardEvent) {\n    if (code === 'End' && this.min !== -Infinity) {\n      this.updateValue(this.min);\n    } else if (code === 'Home' && this.max !== Infinity) {\n      this.updateValue(this.max);\n    }\n  }\n\n  protected checkValue(): void {\n    const value = numberAttribute(this.inputElement.value);\n    this.updateValue(value < this.min ? this.min : value > this.max ? this.max : value);\n  }\n\n  protected onInputChange(): void {\n    this.updateValue(numberAttribute(this.inputElement.value));\n  }\n\n  private registerPressHold(target: ElementRef<HTMLElement>): Observable<unknown> {\n    return fromEvents(target.nativeElement, 'keydown', 'mousedown', 'mouseup', 'keyup').pipe(\n      filter((event) => event?.type !== 'keydown' || ['Space', 'Enter'].includes((event as KeyboardEvent).code)),\n      tap((event) => {\n        event.preventDefault();\n        event.stopPropagation();\n      }),\n      switchMap(({ type }) => (['mouseup', 'keyup'].includes(type) ? NEVER : timer(500, 100).pipe(startWith(undefined)))),\n      this.takeUntilDestroyed(),\n    );\n  }\n}\n","<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #decrementButton><odx-icon name=\"minus\" /></button>\n<input\n  odxControl\n  class=\"odx-spinbox__input\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"isReadonly\"\n  type=\"number\"\n  [value]=\"value\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  (keydown)=\"maxSteps($event)\"\n  (change)=\"onInputChange()\"\n  (blur)=\"checkValue()\"\n/>\n<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #incrementButton><odx-icon name=\"plus\" /></button>\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-spinbox.mjs","sources":["../../../../libs/angular/components/spinbox/src/lib/spinbox.component.ts","../../../../libs/angular/components/spinbox/src/lib/spinbox.component.html","../../../../libs/angular/components/spinbox/src/odx-angular-components-spinbox.ts"],"sourcesContent":["import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, numberAttribute, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { detectControllerChanges, DisabledController, ReadonlyController } from '@odx/angular';\nimport { ControlDirective, CustomFormControl } from '@odx/angular/cdk/custom-form-control';\nimport { IconComponent } from '@odx/angular/components/icon';\nimport { CSSComponent } from '@odx/angular/internal';\nimport { injectElement } from '@odx/angular/utils';\n\n/**\n * SpinboxComponent is a custom form control for numeric input which allows users to increment and decrement\n * the value using corresponding buttons. It supports keyboard navigation and automatic boundary checks for the values.\n *  Extends CustomFormControl to provide additional behavior.\n *\n * @see {CustomFormControl}\n */\n@CSSComponent('spinbox')\n@Component({\n  standalone: true,\n  selector: 'odx-spinbox',\n  templateUrl: 'spinbox.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [ControlDirective, IconComponent],\n  providers: [DisabledController.connect(), ReadonlyController.connect()],\n})\nexport class SpinboxComponent extends CustomFormControl<number> implements AfterViewInit, OnDestroy {\n  private destroyIncrementListener!: () => void;\n  private destroyDecrementListener!: () => void;\n  private get inputElement(): HTMLInputElement {\n    return this.control?.element.nativeElement as HTMLInputElement;\n  }\n\n  @ViewChild('decrementButton')\n  protected decrementButton!: ElementRef<HTMLButtonElement>;\n\n  @ViewChild('incrementButton')\n  protected incrementButton!: ElementRef<HTMLButtonElement>;\n\n  public readonly element = injectElement();\n\n  /**\n   * The maximum allowable value for the spinbox.\n   *\n   * @type {number}\n   * @default Number.POSITIVE_INFINITY\n   */\n  @Input({ transform: numberAttribute })\n  public max = Number.POSITIVE_INFINITY;\n\n  /**\n   * The minimum allowable value for the spinbox.\n   *\n   * @type {number}\n   * @default Number.NEGATIVE_INFINITY\n   */\n  @Input({ transform: numberAttribute })\n  public min = Number.NEGATIVE_INFINITY;\n\n  /**\n   * The value increment or decrement step for the spinbox.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input({ transform: numberAttribute })\n  public step = 1;\n\n  constructor() {\n    super(0);\n    detectControllerChanges(this).subscribe();\n  }\n\n  public ngAfterViewInit(): void {\n    this.destroyDecrementListener = this.pressAndHold(this.decrementButton.nativeElement, () => {\n      this.inputElement?.stepDown();\n      this.updateValue(numberAttribute(this.inputElement.value));\n    });\n    this.destroyIncrementListener = this.pressAndHold(this.incrementButton.nativeElement, () => {\n      this.inputElement?.stepUp();\n      this.updateValue(numberAttribute(this.inputElement.value));\n    });\n  }\n\n  public override ngOnDestroy(): void {\n    super.ngOnDestroy();\n    this.destroyDecrementListener?.();\n    this.destroyIncrementListener?.();\n  }\n\n  public override updateValue(value: number) {\n    if (this.value === value) return;\n    super.updateValue(value);\n  }\n\n  protected maxSteps({ code }: KeyboardEvent) {\n    if (code === 'End' && this.min !== -Infinity) {\n      this.updateValue(this.min);\n    } else if (code === 'Home' && this.max !== Infinity) {\n      this.updateValue(this.max);\n    }\n  }\n\n  protected checkAndUpdate(): void {\n    const value = numberAttribute(this.inputElement.value);\n    const clampedValue = Math.min(this.max, Math.max(this.min, value));\n    this.inputElement.value = clampedValue.toString();\n    this.updateValue(clampedValue);\n  }\n\n  private pressAndHold(element: HTMLElement, handler: () => void, interval = 200): () => void {\n    let timerId: number | undefined;\n\n    const clearTimer = () => {\n      clearInterval(timerId);\n      timerId = undefined;\n    };\n\n    const start = () => {\n      handler();\n      timerId = window.setInterval(handler, interval);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if ((event.code === 'Space' || event.code === 'Enter') && timerId === undefined) {\n        if (event.code === 'Space') {\n          event.preventDefault(); // blocks scrolling\n        }\n        start();\n      }\n    };\n\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (event.code === 'Space' || event.code === 'Enter') {\n        clearTimer();\n      }\n    };\n\n    element.addEventListener('mousedown', start);\n    element.addEventListener('mouseup', clearTimer);\n    element.addEventListener('mouseout', clearTimer);\n    element.addEventListener('keydown', handleKeyDown);\n    element.addEventListener('keyup', handleKeyUp);\n\n    return () => {\n      element.removeEventListener('mousedown', start);\n      element.removeEventListener('mouseup', clearTimer);\n      element.removeEventListener('mouseout', clearTimer);\n      element.removeEventListener('keydown', handleKeyDown);\n      element.removeEventListener('keyup', handleKeyUp);\n    };\n  }\n}\n","<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #decrementButton><odx-icon name=\"minus\" /></button>\n<input\n  odxControl\n  class=\"odx-spinbox__input\"\n  [disabled]=\"isDisabled\"\n  [readonly]=\"isReadonly\"\n  type=\"number\"\n  [value]=\"value\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  (keydown)=\"maxSteps($event)\"\n  (change)=\"checkAndUpdate()\"\n  (blur)=\"checkAndUpdate()\"\n/>\n<button [disabled]=\"isDisabled || isReadonly\" type=\"button\" class=\"odx-spinbox__action\" #incrementButton><odx-icon name=\"plus\" /></button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAOA;;;;;;AAMG;AAWI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,iBAAyB,CAAA;AAG7D,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,aAAiC,CAAC;KAChE;AAqCD,IAAA,WAAA,GAAA;QACE,KAAK,CAAC,CAAC,CAAC,CAAC;QA9BK,IAAO,CAAA,OAAA,GAAG,aAAa,EAAE,CAAC;AAE1C;;;;;AAKG;AAEI,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAEtC;;;;;AAKG;AAEI,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAEtC;;;;;AAKG;QAEI,IAAI,CAAA,IAAA,GAAG,CAAC,CAAC;AAId,QAAA,uBAAuB,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC;KAC3C;IAEM,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAK;AACzF,YAAA,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC;AAC9B,YAAA,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7D,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAK;AACzF,YAAA,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC;AAC5B,YAAA,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7D,SAAC,CAAC,CAAC;KACJ;IAEe,WAAW,GAAA;QACzB,KAAK,CAAC,WAAW,EAAE,CAAC;AACpB,QAAA,IAAI,CAAC,wBAAwB,IAAI,CAAC;AAClC,QAAA,IAAI,CAAC,wBAAwB,IAAI,CAAC;KACnC;AAEe,IAAA,WAAW,CAAC,KAAa,EAAA;AACvC,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK;YAAE,OAAO;AACjC,QAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KAC1B;IAES,QAAQ,CAAC,EAAE,IAAI,EAAiB,EAAA;QACxC,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC5B;aAAM,IAAI,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,GAAG,KAAK,QAAQ,EAAE;AACnD,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAC5B;KACF;IAES,cAAc,GAAA;QACtB,MAAM,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACvD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;QACnE,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC;AAClD,QAAA,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;KAChC;AAEO,IAAA,YAAY,CAAC,OAAoB,EAAE,OAAmB,EAAE,QAAQ,GAAG,GAAG,EAAA;AAC5E,QAAA,IAAI,OAA2B,CAAC;QAEhC,MAAM,UAAU,GAAG,MAAK;YACtB,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,OAAO,GAAG,SAAS,CAAC;AACtB,SAAC,CAAC;QAEF,MAAM,KAAK,GAAG,MAAK;AACjB,YAAA,OAAO,EAAE,CAAC;YACV,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAClD,SAAC,CAAC;AAEF,QAAA,MAAM,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC7C,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,KAAK,OAAO,KAAK,SAAS,EAAE;AAC/E,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;AAC1B,oBAAA,KAAK,CAAC,cAAc,EAAE,CAAC;iBACxB;AACD,gBAAA,KAAK,EAAE,CAAC;aACT;AACH,SAAC,CAAC;AAEF,QAAA,MAAM,WAAW,GAAG,CAAC,KAAoB,KAAI;AAC3C,YAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;AACpD,gBAAA,UAAU,EAAE,CAAC;aACd;AACH,SAAC,CAAC;AAEF,QAAA,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC7C,QAAA,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAChD,QAAA,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACjD,QAAA,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACnD,QAAA,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AAE/C,QAAA,OAAO,MAAK;AACV,YAAA,OAAO,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAChD,YAAA,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AACnD,YAAA,OAAO,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;AACpD,YAAA,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACtD,YAAA,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AACpD,SAAC,CAAC;KACH;+GA7HU,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,CAAA,KAAA,EAAA,KAAA,EAqBP,eAAe,CASf,EAAA,GAAA,EAAA,CAAA,KAAA,EAAA,KAAA,EAAA,eAAe,0BASf,eAAe,CAAA,EAAA,EAAA,SAAA,EAzCxB,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,kBAAkB,CAAC,OAAO,EAAE,CAAC,0QCtBzE,8lBAgBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDKY,gBAAgB,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,MAAA,EAAA,SAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;AAG9B,gBAAgB,GAAA,UAAA,CAAA;IAV5B,YAAY,CAAC,SAAS,CAAC;;AAUX,CAAA,EAAA,gBAAgB,CA8H5B,CAAA;4FA9HY,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;iCACI,IAAI,EAAA,QAAA,EACN,aAAa,EAAA,eAAA,EAEN,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,gBAAgB,EAAE,aAAa,CAAC,EAAA,SAAA,EAC/B,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,kBAAkB,CAAC,OAAO,EAAE,CAAC,EAAA,QAAA,EAAA,8lBAAA,EAAA,CAAA;wDAU7D,eAAe,EAAA,CAAA;sBADxB,SAAS;uBAAC,iBAAiB,CAAA;gBAIlB,eAAe,EAAA,CAAA;sBADxB,SAAS;uBAAC,iBAAiB,CAAA;gBAYrB,GAAG,EAAA,CAAA;sBADT,KAAK;uBAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA;gBAU9B,GAAG,EAAA,CAAA;sBADT,KAAK;uBAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA;gBAU9B,IAAI,EAAA,CAAA;sBADV,KAAK;uBAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA;;;AE/DvC;;AAEG;;;;"}

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 {