diff --git a/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts b/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts index b90006bf2461..6d376a8d7a3a 100644 --- a/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts +++ b/projects/addon-charts/components/line-chart/line-chart-hint.directive.ts @@ -19,12 +19,20 @@ import { TuiDestroyService, TuiHoveredService, tuiPure, + tuiQueryListChanges, tuiZonefree, } from '@taiga-ui/cdk'; import {TuiPoint} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {combineLatest, Observable} from 'rxjs'; -import {distinctUntilChanged, filter, map, startWith, takeUntil} from 'rxjs/operators'; +import { + distinctUntilChanged, + filter, + map, + startWith, + switchMap, + takeUntil, +} from 'rxjs/operators'; // TODO: find the best way for prevent cycle // eslint-disable-next-line import/no-cycle @@ -55,8 +63,7 @@ export class TuiLineChartHintDirective implements AfterContentInit { ngAfterContentInit(): void { combineLatest([tuiLineChartDrivers(this.charts), this.hovered$]) .pipe( - map(([drivers, hovered]) => !drivers && !hovered), - filter(Boolean), + filter(result => !result.some(Boolean)), tuiZonefree(this.ngZone), takeUntil(this.destroy$), ) @@ -104,10 +111,14 @@ export function tuiLineChartDrivers( charts: QueryList<{drivers: QueryList>}>, ): Observable { return combineLatest( - charts - .map(({drivers}) => drivers.map(driver => driver.pipe(startWith(false)))) - .reduce((acc, drivers) => acc.concat(drivers), []), + charts.map(({drivers}) => + tuiQueryListChanges(drivers).pipe( + map(drivers => drivers.map(driver => driver.pipe(startWith(false)))), + ), + ), ).pipe( + map(all => all.reduce((acc, drivers) => acc.concat(drivers), [])), + switchMap(drivers => combineLatest(drivers)), map(values => values.some(Boolean)), distinctUntilChanged(), ); diff --git a/projects/addon-charts/components/line-chart/line-chart.component.ts b/projects/addon-charts/components/line-chart/line-chart.component.ts index 497c91b5c2db..10926d94cb6e 100644 --- a/projects/addon-charts/components/line-chart/line-chart.component.ts +++ b/projects/addon-charts/components/line-chart/line-chart.component.ts @@ -42,7 +42,7 @@ import {TuiLineChartHintDirective} from './line-chart-hint.directive'; templateUrl: './line-chart.template.html', styleUrls: ['./line-chart.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [tuiHintOptionsProvider({direction: 'top'})], + viewProviders: [tuiHintOptionsProvider({direction: 'top', hideDelay: 0})], }) export class TuiLineChartComponent { private readonly _hovered$ = new Subject(); diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts b/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts index c8b177161976..ac3d82d28ec3 100644 --- a/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts +++ b/projects/addon-charts/components/line-days-chart/line-days-chart-hint.directive.ts @@ -23,7 +23,7 @@ import { import {TuiPoint} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {combineLatest, Observable} from 'rxjs'; -import {filter, map, takeUntil} from 'rxjs/operators'; +import {filter, takeUntil} from 'rxjs/operators'; // TODO: find the best way for prevent cycle // eslint-disable-next-line import/no-cycle @@ -49,10 +49,12 @@ export class TuiLineDaysChartHintDirective implements AfterContentInit { ) {} ngAfterContentInit(): void { - combineLatest([tuiLineChartDrivers(this.charts), this.hovered$]) + combineLatest([ + ...this.charts.map(({charts}) => tuiLineChartDrivers(charts)), + this.hovered$, + ]) .pipe( - map(([drivers, hovered]) => !drivers && !hovered), - filter(Boolean), + filter(result => !result.some(Boolean)), tuiZonefree(this.ngZone), takeUntil(this.destroy$), ) diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts b/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts index def00e56774a..8cb9e3e3fd45 100644 --- a/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts +++ b/projects/addon-charts/components/line-days-chart/line-days-chart.component.ts @@ -1,15 +1,19 @@ import { + AfterViewInit, ChangeDetectionStrategy, Component, HostBinding, Inject, Input, + NgZone, Optional, QueryList, + Self, ViewChildren, } from '@angular/core'; import { TuiLineChartComponent, + tuiLineChartDrivers, TuiLineChartHintDirective, } from '@taiga-ui/addon-charts/components/line-chart'; import { @@ -18,15 +22,19 @@ import { TuiContextWithImplicit, TuiDay, tuiDefaultProp, + TuiDestroyService, + TuiHoveredService, tuiIsNumber, tuiIsPresent, TuiMonth, tuiPure, TuiStringHandler, + tuiZonefree, } from '@taiga-ui/cdk'; -import {TuiDriver, TuiPoint} from '@taiga-ui/core'; +import {TuiPoint} from '@taiga-ui/core'; import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; -import {Observable} from 'rxjs'; +import {combineLatest, Observable} from 'rxjs'; +import {filter, takeUntil} from 'rxjs/operators'; // TODO: find the best way for prevent cycle // eslint-disable-next-line import/no-cycle @@ -40,18 +48,17 @@ const DUMMY: TuiPoint = [NaN, NaN]; styleUrls: ['./line-days-chart.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ + TuiDestroyService, + TuiHoveredService, { provide: TuiLineChartHintDirective, useExisting: TuiLineDaysChartComponent, }, ], }) -export class TuiLineDaysChartComponent { +export class TuiLineDaysChartComponent implements AfterViewInit { @ViewChildren(TuiLineChartComponent) - private readonly charts: QueryList = EMPTY_QUERY; - - @ViewChildren(TuiDriver) - readonly drivers: QueryList> = EMPTY_QUERY; + readonly charts: QueryList = EMPTY_QUERY; @Input('value') @tuiDefaultProp() @@ -112,6 +119,9 @@ export class TuiLineDaysChartComponent { @Optional() @Inject(TuiLineDaysChartHintDirective) private readonly hintDirective: TuiLineDaysChartHintDirective | null, + @Self() @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService, + @Inject(NgZone) private readonly ngZone: NgZone, + @Inject(TuiHoveredService) private readonly hovered$: Observable, ) {} get months(): ReadonlyArray { @@ -125,7 +135,7 @@ export class TuiLineDaysChartComponent { get hint(): | PolymorpheusContent> | PolymorpheusContent> { - return this.hintDirective ? this.hintDirective.hint : this.hintContent; + return this.hintDirective?.hint ?? this.hintContent; } @tuiPure @@ -138,11 +148,23 @@ export class TuiLineDaysChartComponent { }; } + ngAfterViewInit(): void { + combineLatest([tuiLineChartDrivers(this.charts), this.hovered$]) + .pipe( + filter(result => !result.some(Boolean)), + tuiZonefree(this.ngZone), + takeUntil(this.destroy$), + ) + .subscribe(() => { + this.onHovered(NaN); + }); + } + readonly daysStringify: TuiStringHandler = index => - this.xStringify ? this.xStringify(this.getMonth(index)) : ''; + this.xStringify ? this.xStringify(this.getDay(index)) : ''; getX(index: number): number { - const current = this.getMonth(index); + const current = this.getDay(index); const months = TuiMonth.lengthBetween(this.value[0][0], current); const offset = months * current.daysCount; @@ -171,7 +193,7 @@ export class TuiLineDaysChartComponent { raise(index: number, {value}: TuiLineChartComponent): void { const x = value[index][0]; - const month = this.getMonth(x); + const month = this.getDay(x); if (this.hintDirective) { this.hintDirective.raise(month); @@ -181,7 +203,7 @@ export class TuiLineDaysChartComponent { } getWidth(index: number): number { - return this.getMonth(index).daysCount * this.months.length; + return this.getDay(index).daysCount * this.months.length; } getContext( @@ -191,7 +213,7 @@ export class TuiLineDaysChartComponent { const x = value[index][0]; return this.hintDirective - ? this.hintDirective.getContext(this.getMonth(x)) + ? this.hintDirective.getContext(this.getDay(x)) : this.getHintContext(x, this.value); } @@ -222,7 +244,7 @@ export class TuiLineDaysChartComponent { ); } - private getMonth(index: number): TuiDay { + private getDay(index: number): TuiDay { return this.value[index - this.value[0][0].day + 1][0]; } } diff --git a/projects/addon-doc/src/components/documentation/documentation.component.ts b/projects/addon-doc/src/components/documentation/documentation.component.ts index 52c89586785d..243526eafc26 100644 --- a/projects/addon-doc/src/components/documentation/documentation.component.ts +++ b/projects/addon-doc/src/components/documentation/documentation.component.ts @@ -14,8 +14,8 @@ import { EMPTY_QUERY, TuiDestroyService, tuiHexToRgb, - tuiItemsQueryListObservable, TuiMatcher, + tuiQueryListChanges, tuiWatch, } from '@taiga-ui/cdk'; import {merge} from 'rxjs'; @@ -73,7 +73,7 @@ export class TuiDocDocumentationComponent implements AfterContentInit { ) {} ngAfterContentInit(): void { - tuiItemsQueryListObservable(this.propertiesConnectors) + tuiQueryListChanges(this.propertiesConnectors) .pipe( switchMap(items => merge(...items.map(({changed$}) => changed$))), tuiWatch(this.changeDetectorRef), diff --git a/projects/addon-table/components/table/tr/tr.component.ts b/projects/addon-table/components/table/tr/tr.component.ts index 0412dcc6de09..69d1141fa83b 100644 --- a/projects/addon-table/components/table/tr/tr.component.ts +++ b/projects/addon-table/components/table/tr/tr.component.ts @@ -7,7 +7,7 @@ import { Inject, QueryList, } from '@angular/core'; -import {EMPTY_QUERY, tuiItemsQueryListObservable} from '@taiga-ui/cdk'; +import {EMPTY_QUERY, tuiQueryListChanges} from '@taiga-ui/cdk'; import {ReplaySubject} from 'rxjs'; import {map, switchMap} from 'rxjs/operators'; @@ -33,7 +33,7 @@ export class TuiTrComponent>> private readonly contentReady$ = new ReplaySubject(1); readonly cells$ = this.contentReady$.pipe( - switchMap(() => tuiItemsQueryListObservable(this.cells)), + switchMap(() => tuiQueryListChanges(this.cells)), map(cells => cells.reduce( (record, item) => ({...record, [item.tuiCell]: item}), @@ -43,7 +43,7 @@ export class TuiTrComponent>> ); readonly item$ = this.contentReady$.pipe( - switchMap(() => tuiItemsQueryListObservable(this.body.rows)), + switchMap(() => tuiQueryListChanges(this.body.rows)), map( rows => /** diff --git a/projects/cdk/observables/items-query-list-observable.ts b/projects/cdk/observables/items-query-list-observable.ts index cca93ffa1263..6e71c967eba7 100644 --- a/projects/cdk/observables/items-query-list-observable.ts +++ b/projects/cdk/observables/items-query-list-observable.ts @@ -6,7 +6,7 @@ import {map, startWith} from 'rxjs/operators'; /** * Converts changes observable of a QueryList to an Observable of arrays */ -export function tuiItemsQueryListObservable( +export function tuiQueryListChanges( queryList: QueryList, ): Observable { return queryList.changes.pipe( @@ -14,3 +14,8 @@ export function tuiItemsQueryListObservable( map(() => tuiGetOriginalArrayFromQueryList(queryList)), ); } + +/** + * @deprecated An alias, use {@link tuiQueryListChanges} instead + */ +export const tuiItemsQueryListObservable = tuiQueryListChanges; diff --git a/projects/cdk/observables/test/items-query-list-observable.spec.ts b/projects/cdk/observables/test/query-list-changes.spec.ts similarity index 73% rename from projects/cdk/observables/test/items-query-list-observable.spec.ts rename to projects/cdk/observables/test/query-list-changes.spec.ts index b95f6c5e33d8..78a712fd7bed 100644 --- a/projects/cdk/observables/test/items-query-list-observable.spec.ts +++ b/projects/cdk/observables/test/query-list-changes.spec.ts @@ -1,7 +1,7 @@ import {QueryList} from '@angular/core'; -import {tuiItemsQueryListObservable} from '@taiga-ui/cdk'; +import {tuiQueryListChanges} from '@taiga-ui/cdk'; -describe(`tuiItemsQueryListObservable`, () => { +describe(`tuiQueryListChanges`, () => { let queryList: QueryList; beforeEach(() => { @@ -12,7 +12,7 @@ describe(`tuiItemsQueryListObservable`, () => { it(`emits current array on subscription`, () => { let result: readonly number[] | null = null; - tuiItemsQueryListObservable(queryList).subscribe(data => { + tuiQueryListChanges(queryList).subscribe(data => { result = data; }); @@ -22,7 +22,7 @@ describe(`tuiItemsQueryListObservable`, () => { it(`emits new array on changes`, () => { let result: readonly number[] | null = null; - tuiItemsQueryListObservable(queryList).subscribe(data => { + tuiQueryListChanges(queryList).subscribe(data => { result = data; }); diff --git a/projects/cdk/schematics/ng-update/v3/constants/deprecated-functions.ts b/projects/cdk/schematics/ng-update/v3/constants/deprecated-functions.ts index 402982db98fa..e7f764b75e22 100644 --- a/projects/cdk/schematics/ng-update/v3/constants/deprecated-functions.ts +++ b/projects/cdk/schematics/ng-update/v3/constants/deprecated-functions.ts @@ -193,7 +193,7 @@ export const DEPRECATED_FUNCTIONS: readonly TypeToRename[] = [ }, { from: `itemsQueryListObservable`, - to: `tuiItemsQueryListObservable`, + to: `tuiQueryListChanges`, moduleSpecifier: [`@taiga-ui/cdk`], }, { diff --git a/projects/cdk/schematics/ng-update/v3/tests/schematic-replace-deprecated-functions.spec.ts b/projects/cdk/schematics/ng-update/v3/tests/schematic-replace-deprecated-functions.spec.ts index c006742e1020..e1d7747b08e2 100644 --- a/projects/cdk/schematics/ng-update/v3/tests/schematic-replace-deprecated-functions.spec.ts +++ b/projects/cdk/schematics/ng-update/v3/tests/schematic-replace-deprecated-functions.spec.ts @@ -488,7 +488,7 @@ import { tuiToGradient, } from '@taiga-ui/addon-editor'; import {tuiDefaultSort} from '@taiga-ui/addon-table'; -import { tuiMockCurrentDate, tuiRestoreRealDate, tuiMockDateInside, tuiPendingIfNotMoscowTimeZone, tuiDragAndDropFrom, tuiFocusVisibleObservable, tuiItemsQueryListObservable, tuiMouseDragFinishFrom, tuiMustBePresent, tuiPressedObservable, tuiPreventDefault, tuiStopPropagation, tuiTypedFromEvent, tuiWatch, tuiIsEdgeOlderThan, tuiIsEdge, tuiIsFirefox, tuiIsIE, tuiIsSafari, tuiCanScroll, tuiContainsOrAfter, tuiGetActualTarget, tuiGetClipboardDataText, tuiGetDocumentOrShadowRoot, tuiGetElementObscures, tuiGetElementOffset, tuiGetScrollParent, tuiIsCurrentTarget, tuiIsInsideIframe, tuiIsNodeIn, tuiBlurNativeFocused, tuiGetNativeFocused, tuiIsNativeFocusedIn, tuiIsNativeFocused, tuiIsNativeKeyboardFocusable, tuiIsNativeMouseFocusable, tuiMoveFocus, tuiSetNativeFocused, tuiSetNativeMouseFocused, tuiPx, tuiClamp, tuiInRange, tuiNormalizeToIntNumber, tuiQuantize, tuiRound, tuiCeil, tuiFloor, tuiSum, tuiToInt, tuiToRadians, tuiDistanceBetweenTouches, tuiEaseInOutQuad, tuiFlatLength, tuiGetOriginalArrayFromQueryList, tuiGetSwipeDirection, tuiIsElementEditable, tuiIsNumber, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiNullableSame, tuiUniqBy, tuiIsApplePlatform, tuiIsApple, tuiIsIos, tuiSvgLinearGradientProcessor, tuiGetClosestFocusable, tuiHexToRgb, tuiHsvToRgb, tuiParseColor, tuiRgbToHex, tuiRgbToHsv } from '@taiga-ui/cdk'; +import { tuiMockCurrentDate, tuiRestoreRealDate, tuiMockDateInside, tuiPendingIfNotMoscowTimeZone, tuiDragAndDropFrom, tuiFocusVisibleObservable, tuiQueryListChanges, tuiMouseDragFinishFrom, tuiMustBePresent, tuiPressedObservable, tuiPreventDefault, tuiStopPropagation, tuiTypedFromEvent, tuiWatch, tuiIsEdgeOlderThan, tuiIsEdge, tuiIsFirefox, tuiIsIE, tuiIsSafari, tuiCanScroll, tuiContainsOrAfter, tuiGetActualTarget, tuiGetClipboardDataText, tuiGetDocumentOrShadowRoot, tuiGetElementObscures, tuiGetElementOffset, tuiGetScrollParent, tuiIsCurrentTarget, tuiIsInsideIframe, tuiIsNodeIn, tuiBlurNativeFocused, tuiGetNativeFocused, tuiIsNativeFocusedIn, tuiIsNativeFocused, tuiIsNativeKeyboardFocusable, tuiIsNativeMouseFocusable, tuiMoveFocus, tuiSetNativeFocused, tuiSetNativeMouseFocused, tuiPx, tuiClamp, tuiInRange, tuiNormalizeToIntNumber, tuiQuantize, tuiRound, tuiCeil, tuiFloor, tuiSum, tuiToInt, tuiToRadians, tuiDistanceBetweenTouches, tuiEaseInOutQuad, tuiFlatLength, tuiGetOriginalArrayFromQueryList, tuiGetSwipeDirection, tuiIsElementEditable, tuiIsNumber, tuiIsPresent, tuiMarkControlAsTouchedAndValidate, tuiNullableSame, tuiUniqBy, tuiIsApplePlatform, tuiIsApple, tuiIsIos, tuiSvgLinearGradientProcessor, tuiGetClosestFocusable, tuiHexToRgb, tuiHsvToRgb, tuiParseColor, tuiRgbToHex, tuiRgbToHsv } from '@taiga-ui/cdk'; import { tuiTextfieldWatchedControllerFactory, tuiSmartSearch, @@ -576,7 +576,7 @@ tuiMockDateInside(...args); tuiPendingIfNotMoscowTimeZone(...args); tuiDragAndDropFrom(...args); tuiFocusVisibleObservable(...args); -tuiItemsQueryListObservable(...args); +tuiQueryListChanges(...args); tuiMouseDragFinishFrom(...args); tuiMustBePresent(...args); tuiPressedObservable(...args); @@ -718,7 +718,7 @@ class Component { tuiPendingIfNotMoscowTimeZone(); tuiDragAndDropFrom(); tuiFocusVisibleObservable(); - tuiItemsQueryListObservable(); + tuiQueryListChanges(); tuiMouseDragFinishFrom(); tuiMustBePresent(); tuiPressedObservable(); diff --git a/projects/core/components/data-list/data-list.component.ts b/projects/core/components/data-list/data-list.component.ts index f1b532c87fc2..e49d6ae913a3 100644 --- a/projects/core/components/data-list/data-list.component.ts +++ b/projects/core/components/data-list/data-list.component.ts @@ -18,9 +18,9 @@ import { tuiIsElement, tuiIsNativeFocusedIn, tuiIsPresent, - tuiItemsQueryListObservable, tuiMoveFocus, tuiPure, + tuiQueryListChanges, tuiSetNativeMouseFocused, } from '@taiga-ui/cdk'; import { @@ -82,7 +82,7 @@ export class TuiDataListComponent implements TuiDataListAccessor { @tuiPure get empty$(): Observable { - return tuiItemsQueryListObservable(this.options).pipe(map(({length}) => !length)); + return tuiQueryListChanges(this.options).pipe(map(({length}) => !length)); } @HostListener('focusin', ['$event.relatedTarget', '$event.currentTarget']) diff --git a/projects/kit/components/accordion/accordion.component.ts b/projects/kit/components/accordion/accordion.component.ts index 65c98b337f00..4fa190f73529 100644 --- a/projects/kit/components/accordion/accordion.component.ts +++ b/projects/kit/components/accordion/accordion.component.ts @@ -13,7 +13,7 @@ import { tuiDefaultProp, TuiDestroyService, tuiIsPresent, - tuiItemsQueryListObservable, + tuiQueryListChanges, } from '@taiga-ui/cdk'; import {identity, merge} from 'rxjs'; import {filter, map, pairwise, switchMap, takeUntil} from 'rxjs/operators'; @@ -47,7 +47,7 @@ export class TuiAccordionComponent implements AfterContentInit { ngAfterContentInit(): void { const {accordionItems} = this; - const rows$ = tuiItemsQueryListObservable(accordionItems); + const rows$ = tuiQueryListChanges(accordionItems); const newOpenRow$ = rows$.pipe( pairwise(), map(([previous, current]) => diff --git a/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts b/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts index 4497b2f60ffa..34c263889c59 100644 --- a/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts +++ b/projects/kit/components/multi-select/multi-select-group/multi-select-group.component.ts @@ -16,8 +16,8 @@ import { TuiIdentityMatcher, TuiInjectionTokenType, tuiIsPresent, - tuiItemsQueryListObservable, tuiPure, + tuiQueryListChanges, } from '@taiga-ui/cdk'; import { TUI_DATA_LIST_HOST, @@ -57,12 +57,12 @@ export class TuiMultiSelectGroupComponent { @tuiPure get empty$(): Observable { - return tuiItemsQueryListObservable(this.options).pipe(map(({length}) => !length)); + return tuiQueryListChanges(this.options).pipe(map(({length}) => !length)); } @tuiPure get disabled$(): Observable { - return tuiItemsQueryListObservable(this.options).pipe( + return tuiQueryListChanges(this.options).pipe( map(items => items.every(({disabled}) => disabled)), ); } @@ -114,7 +114,7 @@ export class TuiMultiSelectGroupComponent { @tuiPure private get items$(): Observable { - return tuiItemsQueryListObservable(this.options).pipe( + return tuiQueryListChanges(this.options).pipe( map(options => options.map(({value}) => value).filter(tuiIsPresent)), ); } diff --git a/projects/kit/components/stepper/stepper.component.ts b/projects/kit/components/stepper/stepper.component.ts index ff914a7eed5b..81b7cffb1597 100644 --- a/projects/kit/components/stepper/stepper.component.ts +++ b/projects/kit/components/stepper/stepper.component.ts @@ -16,9 +16,9 @@ import { tuiDefaultProp, tuiGetOriginalArrayFromQueryList, tuiIsElement, - tuiItemsQueryListObservable, tuiMoveFocus, tuiPure, + tuiQueryListChanges, } from '@taiga-ui/cdk'; import {TuiOrientation} from '@taiga-ui/core'; import {Observable} from 'rxjs'; @@ -66,9 +66,9 @@ export class TuiStepperComponent { @tuiPure get changes$(): Observable { - // Delay is required to trigger change detection after steps are rendered + // Delay is required to trigger change detection after steps are rendered, // so they can update their "active" status - return tuiItemsQueryListObservable(this.steps).pipe(delay(0)); + return tuiQueryListChanges(this.steps).pipe(delay(0)); } @HostListener('keydown.arrowRight', ['$event', '1']) diff --git a/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts b/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts index bc83c1824329..e8466d16d3f2 100644 --- a/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts +++ b/projects/kit/directives/data-list-dropdown-manager/data-list-dropdown-manager.directive.ts @@ -11,9 +11,9 @@ import { EMPTY_QUERY, TuiDestroyService, tuiGetClosestFocusable, - tuiItemsQueryListObservable, tuiPreventDefault, tuiPure, + tuiQueryListChanges, tuiTypedFromEvent, } from '@taiga-ui/cdk'; import {TuiDropdownDirective} from '@taiga-ui/core'; @@ -91,7 +91,7 @@ export class TuiDataListDropdownManagerDirective implements AfterViewInit { @tuiPure private get elements$(): Observable { - return tuiItemsQueryListObservable(this.elements).pipe( + return tuiQueryListChanges(this.elements).pipe( map(array => array.map(({nativeElement}) => nativeElement)), shareReplay({bufferSize: 1, refCount: true}), );