@koobiq/components 18.2.0 → 18.2.1

package/fesm2022/koobiq-components-tabs.mjs

@@ -2,7 +2,7 @@ import * as i3 from '@angular/cdk/bidi';
 import * as i1$1 from '@angular/cdk/portal';
 import { CdkPortalOutlet, CdkPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, forwardRef, Directive, Inject, InjectionToken, TemplateRef, ContentChild, ContentChildren, Attribute, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Input, Output, ViewChild, forwardRef, Directive, Inject, inject, DestroyRef, InjectionToken, TemplateRef, ContentChild, ContentChildren, Attribute, NgModule } from '@angular/core';
 import { Subscription, Subject, fromEvent, of, merge, timer } from 'rxjs';
 import { startWith, takeUntil, debounceTime } from 'rxjs/operators';
 import { trigger, state, style, transition, animate } from '@angular/animations';
@@ -16,6 +16,7 @@ import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import * as i1$2 from '@angular/cdk/a11y';
 import { FocusKeyManager, A11yModule } from '@angular/cdk/a11y';
 import { hasModifierKey, ENTER, SPACE } from '@angular/cdk/keycodes';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { HOME, END, UP_ARROW, DOWN_ARROW, RIGHT_ARROW, LEFT_ARROW } from '@koobiq/cdk/keycodes';
 import { KBQ_DROPDOWN_SCROLL_STRATEGY } from '@koobiq/components/dropdown';
 import * as i4 from '@koobiq/components/icon';
@@ -312,8 +313,7 @@ class KbqPaginatedTabHeader {
          * layout recalculations if it's known that pagination won't be required.
          */
         this.disablePagination = false;
-        /** Emits when the component is destroyed. */
-        this.destroyed = new Subject();
+        this.destroyRef = inject(DestroyRef);
         this.vertical = false;
         /** Stream that will stop the automated scrolling. */
         this.stopScrolling = new Subject();
@@ -322,7 +322,7 @@ class KbqPaginatedTabHeader {
         // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
         ngZone.runOutsideAngular(() => {
             fromEvent(elementRef.nativeElement, 'mouseleave')
-                .pipe(takeUntil(this.destroyed))
+                .pipe(takeUntilDestroyed())
                 .subscribe(() => this.stopInterval());
         });
     }
@@ -330,10 +330,10 @@ class KbqPaginatedTabHeader {
     ngAfterViewInit() {
         // We need to handle these events manually, because we want to bind passive event listeners.
         fromEvent(this.previousPaginator.nativeElement, 'touchstart', passiveEventListenerOptions)
-            .pipe(takeUntil(this.destroyed))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.handlePaginatorPress('before'));
         fromEvent(this.nextPaginator.nativeElement, 'touchstart', passiveEventListenerOptions)
-            .pipe(takeUntil(this.destroyed))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.handlePaginatorPress('after'));
     }
     ngAfterContentInit() {
@@ -350,7 +350,7 @@ class KbqPaginatedTabHeader {
         // On dir change or window resize, realign the ink bar and update the orientation of
         // the key manager if the direction has changed.
         merge(dirChange, resize, this.items.changes)
-            .pipe(takeUntil(this.destroyed))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             // We need to defer this to give the browser some time to recalculate
             // the element dimensions. The call has to be wrapped in `NgZone.run`,
@@ -364,7 +364,7 @@ class KbqPaginatedTabHeader {
         // If there is a change in the focus key manager we need to emit the `indexFocused`
         // event in order to provide a public event that notifies about focus changes. Also we realign
         // the tabs container by scrolling the new focused tab into the visible section.
-        this.keyManager.change.pipe(takeUntil(this.destroyed)).subscribe((newFocusIndex) => {
+        this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((newFocusIndex) => {
             this.indexFocused.emit(newFocusIndex);
             this.setTabFocus(newFocusIndex);
         });
@@ -393,8 +393,6 @@ class KbqPaginatedTabHeader {
         }
     }
     ngOnDestroy() {
-        this.destroyed.next();
-        this.destroyed.complete();
         this.stopScrolling.complete();
     }
     handleKeydown(event) {
@@ -650,7 +648,7 @@ class KbqPaginatedTabHeader {
         // Start a timer after the delay and keep firing based on the interval.
         timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL)
             // Keep the timer going until something tells it to stop or the component is destroyed.
-            .pipe(takeUntil(merge(this.stopScrolling, this.destroyed)))
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.stopScrolling))
             .subscribe(() => {
             const { maxScrollDistance, distance } = this.scrollHeader(direction);
             // Stop the timer if we've reached the start or the end.