From 67632cac4c1535b70e9498d0a7e8a2c869f6804d Mon Sep 17 00:00:00 2001
From: Zurab Developer <75216044+ZurabDev@users.noreply.github.com>
Date: Wed, 11 Oct 2023 11:49:45 +0300
Subject: [PATCH 01/10] fix(components/tabs): update tab #759
---
.../tabs-example-closable.component.html | 4 +++-
.../tabs-example-closable.component.ts | 1 +
.../components/tabs/components/tab.component.ts | 11 +++++------
.../src/lib/components/tabs/tabs.component.ts | 2 ++
.../src/lib/components/tabs/tabs.service.ts | 16 +++++++++++++++-
5 files changed, 26 insertions(+), 8 deletions(-)
diff --git a/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.html b/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.html
index 82bf5e3e9c..8ba43c5a9e 100644
--- a/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.html
+++ b/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.html
@@ -1,5 +1,5 @@
+
+activeTabIndex: [{{ activeTabIndex }}]
diff --git a/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.ts b/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.ts
index 1297b713f8..35a63b2199 100644
--- a/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.ts
+++ b/apps/doc/src/app/components/tabs/examples/tabs-example-closable/tabs-example-closable.component.ts
@@ -8,6 +8,7 @@ import { PrizmTabItem } from '@prizm-ui/components';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TabsExampleClosableComponent {
+ activeTabIndex = 0;
public tabs: PrizmTabItem[] = [
{
title: 'Вкладка 1',
diff --git a/libs/components/src/lib/components/tabs/components/tab.component.ts b/libs/components/src/lib/components/tabs/components/tab.component.ts
index e1c2969f56..35de5cab21 100644
--- a/libs/components/src/lib/components/tabs/components/tab.component.ts
+++ b/libs/components/src/lib/components/tabs/components/tab.component.ts
@@ -4,7 +4,6 @@ import {
ElementRef,
EventEmitter,
HostBinding,
- HostListener,
Input,
OnDestroy,
OnInit,
@@ -14,10 +13,10 @@ import {
import { PrizmTabType } from '../tabs.interface';
import { PrizmTabsService } from '../tabs.service';
import { PolymorphContent } from '../../../directives';
-import { combineLatest, fromEvent, Observable, of, switchMap, timeout } from 'rxjs';
-import { PrizmDestroyService, PrizmLetContextService } from '@prizm-ui/helpers';
+import { combineLatest, fromEvent, merge, Observable, of, switchMap, timeout } from 'rxjs';
+import { moveInEventLoopIteration, PrizmDestroyService, PrizmLetContextService } from '@prizm-ui/helpers';
import { PrizmTabContext, PrizmTabMenuContext } from '../tabs.model';
-import { filter, first, map, takeUntil, tap } from 'rxjs/operators';
+import { filter, first, map, startWith, takeUntil, tap } from 'rxjs/operators';
import { PrizmAbstractTestId } from '../../../abstract/interactive';
@Component({
@@ -72,7 +71,7 @@ export class PrizmTabComponent extends PrizmAbstractTestId implements OnInit, On
tap(tab => {
if (tab === this) this.tabsService.removeTab(tab);
}),
- takeUntil(this.destroy)
+ timeout(25)
)
.subscribe();
}
@@ -86,7 +85,7 @@ export class PrizmTabComponent extends PrizmAbstractTestId implements OnInit, On
}
public ngOnInit(): void {
- this.tabsService.tabs$
+ merge(this.tabsService.removed$$.pipe(moveInEventLoopIteration(1), startWith(void 0)))
.pipe(
filter(() => this.isMainProjectedTab()),
tap(() => {
diff --git a/libs/components/src/lib/components/tabs/tabs.component.ts b/libs/components/src/lib/components/tabs/tabs.component.ts
index becf1c0e4a..ae0f7c7299 100644
--- a/libs/components/src/lib/components/tabs/tabs.component.ts
+++ b/libs/components/src/lib/components/tabs/tabs.component.ts
@@ -78,6 +78,7 @@ export class PrizmTabsComponent extends PrizmAbstractTestId implements OnInit, O
constructor(
private readonly cdRef: ChangeDetectorRef,
+ private readonly elRef: ElementRef,
private readonly destroy$: PrizmDestroyService,
private readonly tabsService: PrizmTabsService
) {
@@ -85,6 +86,7 @@ export class PrizmTabsComponent extends PrizmAbstractTestId implements OnInit, O
}
public ngOnInit(): void {
+ this.tabsService.initObservingTabsParent(this.elRef.nativeElement);
this.mutationObserver = new MutationObserver(() => this.mutationDetector$.next());
this.resizeObserver = new ResizeObserver(() => this.mutationDetector$.next());
this.mutationObserver.observe(this.tabsContainer.nativeElement, {
diff --git a/libs/components/src/lib/components/tabs/tabs.service.ts b/libs/components/src/lib/components/tabs/tabs.service.ts
index 2c75686cb7..5d4f743b63 100644
--- a/libs/components/src/lib/components/tabs/tabs.service.ts
+++ b/libs/components/src/lib/components/tabs/tabs.service.ts
@@ -2,16 +2,22 @@ import { Injectable, OnDestroy } from '@angular/core';
import { BehaviorSubject, combineLatest, concat, Observable, of, Subject } from 'rxjs';
import { distinctUntilChanged, filter, map, startWith, take, takeUntil, tap } from 'rxjs/operators';
import { PrizmTabComponent } from './components/tab.component';
-import { filterTruthy, PrizmDestroyService } from '@prizm-ui/helpers';
+import { filterTruthy, PrizmDestroyService, prizmFromMutationObserver$ } from '@prizm-ui/helpers';
import { PrizmTabCanOpen } from './tabs.model';
@Injectable()
export class PrizmTabsService implements OnDestroy {
readonly tabs = new Map();
readonly changes$$ = new Subject