@koobiq/components 18.2.0 → 18.3.0

package/fesm2022/koobiq-components-select.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, EventEmitter, isDevMode, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, ContentChild, ViewChildren, ContentChildren, Input, Output, NgModule } from '@angular/core';
+import { Directive, EventEmitter, inject, DestroyRef, isDevMode, ElementRef, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Self, Inject, ViewChild, ContentChild, ViewChildren, ContentChildren, Input, Output, NgModule } from '@angular/core';
 import * as i1 from '@koobiq/components/core';
 import { mixinTabIndex, mixinDisabled, mixinErrorState, getKbqSelectDynamicMultipleError, getKbqSelectNonFunctionValueError, getKbqSelectNonArrayValueError, KbqVirtualOption, SELECT_PANEL_PADDING_X, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, KBQ_SELECT_SCROLL_STRATEGY, KBQ_LOCALE_SERVICE, KBQ_OPTION_PARENT_COMPONENT, KbqSelectFooter, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqOption, KbqOptgroup, kbqSelectAnimations, KbqOptionModule, KbqSelectSearchEmptyResult, KBQ_SELECT_SCROLL_STRATEGY_PROVIDER } from '@koobiq/components/core';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
@@ -9,16 +9,17 @@ import { SelectionModel } from '@angular/cdk/collections';
 import * as i2 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i4 from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
 import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, ESCAPE, TAB, HOME, END, PAGE_UP, PAGE_DOWN, A, BACKSPACE, DELETE } from '@koobiq/cdk/keycodes';
 import * as i5 from '@koobiq/components/form-field';
-import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import * as i7 from '@koobiq/components/tags';
 import { KbqTag, KbqTagsModule } from '@koobiq/components/tags';
 import { SelectSizeMultipleContentGap } from '@koobiq/design-tokens';
 import { Subject, defer, merge, Subscription, BehaviorSubject } from 'rxjs';
-import { switchMap, take, filter, map, distinctUntilChanged, takeUntil, startWith, delay } from 'rxjs/operators';
+import { switchMap, take, filter, map, distinctUntilChanged, startWith, delay, takeUntil } from 'rxjs/operators';
 import * as i6 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import * as i8 from '@angular/common';
@@ -314,8 +315,7 @@ class KbqSelect extends KbqSelectMixinBase {
         /** Unique id for this input. */
         this.uid = `kbq-select-${nextUniqueId++}`;
         this.visibleChanges = new BehaviorSubject(false);
-        /** Emits whenever the component is destroyed. */
-        this.destroy = new Subject();
+        this.destroyRef = inject(DestroyRef);
         /** `View -> model callback called when value changes` */
         this.onChange = () => { };
         /** `View -> model callback called when select has been touched` */
@@ -341,7 +341,9 @@ class KbqSelect extends KbqSelectMixinBase {
         // We need `distinctUntilChanged` here, because some browsers will
         // fire the animation end event twice for the same animation. See:
         // https://github.com/angular/angular/issues/24084
-        this.panelDoneAnimatingStream.pipe(distinctUntilChanged(), takeUntil(this.destroy)).subscribe(() => {
+        this.panelDoneAnimatingStream
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
             if (this.panelOpen) {
                 this.scrollTop = 0;
                 if (this.search) {
@@ -355,17 +357,17 @@ class KbqSelect extends KbqSelectMixinBase {
             }
         });
         merge(this.optionSelectionChanges, this.visibleChanges)
-            .pipe(distinctUntilChanged(), takeUntil(this.destroy))
+            .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => setTimeout(() => this.calculateHiddenItems(), 0));
     }
     ngAfterContentInit() {
         this.withVirtualScroll = !!this.cdkVirtualForOf;
         this.initKeyManager();
-        this.selectionModel.changed.pipe(takeUntil(this.destroy)).subscribe((event) => {
+        this.selectionModel.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
             event.added.forEach((option) => option.select());
             event.removed.forEach((option) => option.deselect());
         });
-        this.options.changes.pipe(startWith(null), takeUntil(this.destroy)).subscribe(() => {
+        this.options.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.resetOptions();
             this.initializeSelection();
         });
@@ -389,8 +391,6 @@ class KbqSelect extends KbqSelectMixinBase {
         }
     }
     ngOnDestroy() {
-        this.destroy.next();
-        this.destroy.complete();
         this.stateChanges.complete();
         this.closeSubscription.unsubscribe();
     }
@@ -814,7 +814,7 @@ class KbqSelect extends KbqSelectMixinBase {
             .withTypeAhead(typeAheadDebounce, this.search ? -1 : 0)
             .withVerticalOrientation()
             .withHorizontalOrientation(this.isRtl() ? 'rtl' : 'ltr');
-        this.keyManager.change.pipe(takeUntil(this.destroy)).subscribe(() => {
+        this.keyManager.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             if (this.panelOpen && this.panel) {
                 this.scrollActiveOptionIntoView();
             }
@@ -825,8 +825,9 @@ class KbqSelect extends KbqSelectMixinBase {
     }
     /** Drops current option subscriptions and IDs and resets from scratch. */
     resetOptions() {
-        const changedOrDestroyed = merge(this.options.changes, this.destroy);
-        this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed)).subscribe((event) => {
+        this.optionSelectionChanges
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.options.changes))
+            .subscribe((event) => {
             this.onSelect(event.source, event.isUserInput);
             if (this.search && this.search.isSearchChanged) {
                 Promise.resolve().then(() => this.keyManager.updateActiveItem(0));
@@ -840,7 +841,7 @@ class KbqSelect extends KbqSelectMixinBase {
         // Listen to changes in the internal state of the options and react accordingly.
         // Handles cases like the labels of the selected options changing.
         merge(...this.options.map((option) => option.stateChanges))
-            .pipe(takeUntil(changedOrDestroyed))
+            .pipe(takeUntilDestroyed(this.destroyRef), takeUntil(this.options.changes))
             .subscribe(() => {
             this._changeDetectorRef.markForCheck();
             this.stateChanges.next();
@@ -1169,8 +1170,7 @@ class KbqSelectModule {
             KbqSelectTrigger,
             KbqSelectSearchEmptyResult,
             NgClass,
-            NgTemplateOutlet], exports: [KbqFormFieldModule,
-            KbqSelect,
+            NgTemplateOutlet], exports: [KbqSelect,
             KbqOptionTooltip,
             KbqOptionModule,
             KbqSelectSearch,
@@ -1182,8 +1182,7 @@ class KbqSelectModule {
             KbqOptionModule,
             KbqIconModule,
             KbqTagsModule,
-            KbqToolTipModule, KbqFormFieldModule,
-            KbqOptionModule] }); }
+            KbqToolTipModule, KbqOptionModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqSelectModule, decorators: [{
             type: NgModule,
@@ -1203,7 +1202,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                         NgTemplateOutlet
                     ],
                     exports: [
-                        KbqFormFieldModule,
                         KbqSelect,
                         KbqOptionTooltip,
                         KbqOptionModule,