From 8f1f3d8a729a31948f97252368947f13cbc126e1 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Thu, 27 Jun 2024 11:47:12 +0300
Subject: [PATCH 1/5] fix(components/switcher): add async example for issue
 #1476

---
 .../switcher-async-example.component.html     | 13 +++++++
 .../switcher-async-example.component.less     |  0
 .../switcher-async-example.component.ts       | 34 +++++++++++++++++++
 .../switcher/switcher-example.component.html  |  4 +++
 .../switcher/switcher-example.component.ts    |  5 +++
 .../switcher/switcher-example.module.ts       |  2 ++
 6 files changed, 58 insertions(+)
 create mode 100644 apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
 create mode 100644 apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less
 create mode 100644 apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts

diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
new file mode 100644
index 0000000000..83bb6db85c
--- /dev/null
+++ b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
@@ -0,0 +1,13 @@
+<prizm-switcher [switchers]="switchers" [selectedSwitcherIdx]="1"></prizm-switcher>
+
+<br />
+<br />
+
+<prizm-switcher [switchers]="(switchers$ | async)!" [selectedSwitcherIdx]="1"></prizm-switcher>
+
+<br />
+<br />
+
+<!--  Note: properties order matters  -->
+
+<prizm-switcher [selectedSwitcherIdx]="1" [switchers]="switchers"></prizm-switcher>
diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
new file mode 100644
index 0000000000..e16c378078
--- /dev/null
+++ b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
@@ -0,0 +1,34 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PrizmSwitcherItem } from '@prizm-ui/components';
+import { PrizmDestroyService } from '@prizm-ui/helpers';
+import { map, takeUntil, timer } from 'rxjs';
+
+@Component({
+  selector: 'prizm-switcher-async-example',
+  templateUrl: './switcher-async-example.component.html',
+  styleUrls: ['./switcher-async-example.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [PrizmDestroyService],
+})
+export class SwitcherAsyncExampleComponent {
+  public readonly switchers: PrizmSwitcherItem[] = [
+    {
+      title: 'Таблицы',
+    },
+    {
+      title: 'Графики',
+    },
+    {
+      title: 'Мнемосхемы',
+    },
+    {
+      title: 'Дашборды',
+    },
+  ];
+
+  public readonly switchers$ = timer(100).pipe(
+    map(() => this.switchers),
+    takeUntil(this.destroy$)
+  );
+  constructor(private readonly destroy$: PrizmDestroyService) {}
+}
diff --git a/apps/doc/src/app/components/switcher/switcher-example.component.html b/apps/doc/src/app/components/switcher/switcher-example.component.html
index 2143af03b4..e647dda883 100644
--- a/apps/doc/src/app/components/switcher/switcher-example.component.html
+++ b/apps/doc/src/app/components/switcher/switcher-example.component.html
@@ -7,6 +7,10 @@
       <prizm-switcher-basic-example></prizm-switcher-basic-example>
     </prizm-doc-example>
 
+    <prizm-doc-example id="async" [content]="exampleAsyncSwitcher" heading="Async">
+      <prizm-switcher-async-example></prizm-switcher-async-example>
+    </prizm-doc-example>
+
     <prizm-doc-example id="innerL" [content]="exampleInnerLSwitcher" heading="Type inner, size L">
       <prizm-switcher-inner-l-example></prizm-switcher-inner-l-example>
     </prizm-doc-example>
diff --git a/apps/doc/src/app/components/switcher/switcher-example.component.ts b/apps/doc/src/app/components/switcher/switcher-example.component.ts
index 18f44943ec..cbece1f33c 100644
--- a/apps/doc/src/app/components/switcher/switcher-example.component.ts
+++ b/apps/doc/src/app/components/switcher/switcher-example.component.ts
@@ -39,6 +39,11 @@ export class SwitcherExampleComponent {
     HTML: import('./examples/switcher-basic-example/switcher-basic-example.component.html?raw'),
   };
 
+  public readonly exampleAsyncSwitcher: TuiDocExample = {
+    TypeScript: import('./examples/switcher-async-example/switcher-async-example.component?raw'),
+    HTML: import('./examples/switcher-async-example/switcher-async-example.component.html?raw'),
+  };
+
   public readonly exampleInnerLSwitcher: TuiDocExample = {
     TypeScript: import('./examples/switcher-inner-l-example/switcher-inner-l-example.component?raw'),
     HTML: import('./examples/switcher-inner-l-example/switcher-inner-l-example.component.html?raw'),
diff --git a/apps/doc/src/app/components/switcher/switcher-example.module.ts b/apps/doc/src/app/components/switcher/switcher-example.module.ts
index 059f4f2b7c..7762379f87 100644
--- a/apps/doc/src/app/components/switcher/switcher-example.module.ts
+++ b/apps/doc/src/app/components/switcher/switcher-example.module.ts
@@ -13,6 +13,7 @@ import { SwitcherOuterSExampleComponent } from './examples/switcher-outer-s-exam
 import { SwitcherWithIconExampleComponent } from './examples/switcher-with-icon-example/switcher-with-icon-example.component';
 import { SwitcherOnlyIconExampleComponent } from './examples/switcher-only-icon-example/switcher-only-icon-example.component';
 import { ReactiveFormsModule } from '@angular/forms';
+import { SwitcherAsyncExampleComponent } from './examples/switcher-async-example/switcher-async-example.component';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { ReactiveFormsModule } from '@angular/forms';
     SwitcherOuterSExampleComponent,
     SwitcherWithIconExampleComponent,
     SwitcherOnlyIconExampleComponent,
+    SwitcherAsyncExampleComponent,
   ],
   imports: [
     CommonModule,

From 88739e2c2d2cd3554b855178fb89df808d6c6c61 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 3 Jul 2024 12:20:28 +0300
Subject: [PATCH 2/5] fix(components/switcher): selected switcher logic moved
 from setter to ngOnChanges #1476

---
 .../switcher-async-example.component.html     | 20 ++++++++---
 .../switcher-async-example.component.less     |  3 ++
 .../switcher-async-example.component.ts       | 35 +++++++++++++++++--
 .../switcher/switcher-example.module.ts       |  3 +-
 .../components/switcher/switcher.component.ts | 31 +++++++++-------
 .../lib/components/switcher/swithcer.const.ts |  1 +
 6 files changed, 72 insertions(+), 21 deletions(-)
 create mode 100644 libs/components/src/lib/components/switcher/swithcer.const.ts

diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
index 83bb6db85c..59f46f1f4d 100644
--- a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
+++ b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
@@ -1,13 +1,25 @@
-<prizm-switcher [switchers]="switchers" [selectedSwitcherIdx]="1"></prizm-switcher>
+<h2>Static</h2>
+
+<prizm-switcher [switchers]="switchers" [selectedSwitcherIdx]="selectedIndex"></prizm-switcher>
+
+<br />
+<br />
+
+<h2>Async</h2>
+<prizm-switcher [switchers]="(switchers$ | async)!" [selectedSwitcherIdx]="selectedIndex"></prizm-switcher>
 
 <br />
 <br />
 
-<prizm-switcher [switchers]="(switchers$ | async)!" [selectedSwitcherIdx]="1"></prizm-switcher>
+<h2>Inverse attribute ordering</h2>
+
+<prizm-switcher [selectedSwitcherIdx]="selectedIndex" [switchers]="switchers"></prizm-switcher>
 
 <br />
 <br />
 
-<!--  Note: properties order matters  -->
+<button class="margin-right" (click)="toggleIndex()" prizmButton>
+  Update index. Current index is {{ selectedIndex }}
+</button>
 
-<prizm-switcher [selectedSwitcherIdx]="1" [switchers]="switchers"></prizm-switcher>
+<button (click)="toggleSwitchers()" prizmButton>Update switchers</button>
diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less
index e69de29bb2..80f9c2e115 100644
--- a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less
+++ b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.less
@@ -0,0 +1,3 @@
+.margin-right {
+  margin-right: 24px;
+}
diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
index e16c378078..76dd331333 100644
--- a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
+++ b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { PrizmSwitcherItem } from '@prizm-ui/components';
 import { PrizmDestroyService } from '@prizm-ui/helpers';
-import { map, takeUntil, timer } from 'rxjs';
+import { BehaviorSubject, switchMap, takeUntil, tap, timer } from 'rxjs';
 
 @Component({
   selector: 'prizm-switcher-async-example',
@@ -11,7 +11,8 @@ import { map, takeUntil, timer } from 'rxjs';
   providers: [PrizmDestroyService],
 })
 export class SwitcherAsyncExampleComponent {
-  public readonly switchers: PrizmSwitcherItem[] = [
+  public selectedIndex = 1;
+  public readonly switchersSetA: PrizmSwitcherItem[] = [
     {
       title: 'Таблицы',
     },
@@ -20,15 +21,43 @@ export class SwitcherAsyncExampleComponent {
     },
     {
       title: 'Мнемосхемы',
+      disabled: true,
     },
     {
       title: 'Дашборды',
     },
   ];
 
+  public readonly switchersSetB: PrizmSwitcherItem[] = [
+    {
+      title: 'Москва',
+    },
+    {
+      title: 'Санкт-Петербург',
+    },
+  ];
+
+  public switchers: PrizmSwitcherItem[] = this.switchersSetA;
+
   public readonly switchers$ = timer(100).pipe(
-    map(() => this.switchers),
+    switchMap(() => this.switchers$$),
+    tap(value => (this.switchers = value)),
     takeUntil(this.destroy$)
   );
+
+  private readonly switchers$$: BehaviorSubject<PrizmSwitcherItem[]> = new BehaviorSubject<
+    PrizmSwitcherItem[]
+  >(this.switchersSetA);
+
   constructor(private readonly destroy$: PrizmDestroyService) {}
+
+  public toggleIndex(): void {
+    this.selectedIndex === 1 ? (this.selectedIndex = 2) : (this.selectedIndex = 1);
+  }
+
+  public toggleSwitchers(): void {
+    this.switchers === this.switchersSetA
+      ? this.switchers$$.next(this.switchersSetB)
+      : this.switchers$$.next(this.switchersSetA);
+  }
 }
diff --git a/apps/doc/src/app/components/switcher/switcher-example.module.ts b/apps/doc/src/app/components/switcher/switcher-example.module.ts
index 7762379f87..6274b0e957 100644
--- a/apps/doc/src/app/components/switcher/switcher-example.module.ts
+++ b/apps/doc/src/app/components/switcher/switcher-example.module.ts
@@ -4,7 +4,7 @@ import { SwitcherExampleComponent } from './switcher-example.component';
 import { prizmDocGenerateRoutes, PrizmAddonDocModule } from '@prizm-ui/doc';
 import { RouterModule } from '@angular/router';
 import { SwitcherBasicExampleComponent } from './examples/switcher-basic-example/switcher-basic-example.component';
-import { PrizmSwitcherModule } from '@prizm-ui/components';
+import { PrizmButtonComponent, PrizmSwitcherModule } from '@prizm-ui/components';
 import { SwitcherInnerLExampleComponent } from './examples/switcher-inner-l-example/switcher-inner-l-example.component';
 import { SwitcherInnerMExampleComponent } from './examples/switcher-inner-m-example/switcher-inner-m-example.component';
 import { SwitcherOuterMExampleComponent } from './examples/switcher-outer-m-example/switcher-outer-m-example.component';
@@ -34,6 +34,7 @@ import { SwitcherAsyncExampleComponent } from './examples/switcher-async-example
     RouterModule.forChild(prizmDocGenerateRoutes(SwitcherExampleComponent)),
     PrizmSwitcherModule,
     ReactiveFormsModule,
+    PrizmButtonComponent,
   ],
 })
 export class SwitcherExampleModule {}
diff --git a/libs/components/src/lib/components/switcher/switcher.component.ts b/libs/components/src/lib/components/switcher/switcher.component.ts
index 8f27b30245..7d663b1c64 100644
--- a/libs/components/src/lib/components/switcher/switcher.component.ts
+++ b/libs/components/src/lib/components/switcher/switcher.component.ts
@@ -5,9 +5,11 @@ import {
   EventEmitter,
   HostBinding,
   Input,
+  OnChanges,
   Optional,
   Output,
   Self,
+  SimpleChanges,
 } from '@angular/core';
 import { PrizmSwitcherItem, PrizmSwitcherSize, PrizmSwitcherType } from './switcher.interface';
 import { prizmDefaultProp } from '@prizm-ui/core';
@@ -17,6 +19,8 @@ import { noop } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { PrizmSwitcherItemComponent } from './components/switcher-item/switcher-item.component';
 import { PrizmSwitcherHintDirective } from './directives/switcher-hint.directive';
+import { prizmHasChanges } from '@prizm-ui/helpers';
+import { INITIAL_SWITHCER_INDEX } from './swithcer.const';
 
 @Component({
   selector: 'prizm-switcher',
@@ -26,11 +30,7 @@ import { PrizmSwitcherHintDirective } from './directives/switcher-hint.directive
   standalone: true,
   imports: [CommonModule, PrizmSwitcherHintDirective, PrizmSwitcherItemComponent],
 })
-export class PrizmSwitcherComponent extends PrizmAbstractTestId implements ControlValueAccessor {
-  onChange: (v: number) => void = noop;
-  onTouched: () => void = noop;
-  private selectedSwitcherIdx_ = 0;
-
+export class PrizmSwitcherComponent extends PrizmAbstractTestId implements ControlValueAccessor, OnChanges {
   @Input()
   @prizmDefaultProp()
   public size: PrizmSwitcherSize = 'l';
@@ -45,13 +45,7 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
 
   @Input()
   @prizmDefaultProp()
-  public set selectedSwitcherIdx(idx: number) {
-    const item = this.switchers[idx];
-    if (item) this.selectSwitcher(item, idx);
-  }
-  get selectedSwitcherIdx() {
-    return this.selectedSwitcherIdx_;
-  }
+  public selectedSwitcherIdx: number = INITIAL_SWITHCER_INDEX;
 
   @Input()
   @HostBinding('class.full-width')
@@ -62,6 +56,9 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
 
   override readonly testId_ = 'ui_switcher';
 
+  onChange: (v: number) => void = noop;
+  onTouched: () => void = noop;
+
   constructor(
     public readonly cdRef: ChangeDetectorRef,
     @Optional() @Self() public readonly ngControl: NgControl
@@ -71,11 +68,19 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
       this.ngControl.valueAccessor = this;
     }
   }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (prizmHasChanges(changes, 'selectedSwitcherIdx') && prizmHasChanges(changes, 'switchers')) {
+      const idx =
+        this.selectedSwitcherIdx <= this.switchers.length ? this.selectedSwitcherIdx : INITIAL_SWITHCER_INDEX;
+      const item = this.switchers[idx];
+      if (item) this.selectSwitcher(item, idx);
+    }
+  }
   public selectSwitcher(item: PrizmSwitcherItem, idx: number): void {
     if (this.ngControl?.disabled) return;
     if (item.disabled) return;
     if (this.selectedSwitcherIdx === idx) return;
-    this.selectedSwitcherIdxChange.emit((this.selectedSwitcherIdx_ = idx));
+    this.selectedSwitcherIdxChange.emit((this.selectedSwitcherIdx = idx));
     this.onChange(this.selectedSwitcherIdx);
   }
 
diff --git a/libs/components/src/lib/components/switcher/swithcer.const.ts b/libs/components/src/lib/components/switcher/swithcer.const.ts
new file mode 100644
index 0000000000..aa7c41daad
--- /dev/null
+++ b/libs/components/src/lib/components/switcher/swithcer.const.ts
@@ -0,0 +1 @@
+export const INITIAL_SWITHCER_INDEX = 0;

From d994b9dfc55bce4425eb8490ef1cb3ffc20ce2f4 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Mon, 8 Jul 2024 08:59:24 +0300
Subject: [PATCH 3/5] feat(components/switcher): move logic from ngonchanges to
 function #1476

---
 .../lib/components/switcher/switcher.component.ts    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/lib/components/switcher/switcher.component.ts b/libs/components/src/lib/components/switcher/switcher.component.ts
index 7d663b1c64..0dc078b87d 100644
--- a/libs/components/src/lib/components/switcher/switcher.component.ts
+++ b/libs/components/src/lib/components/switcher/switcher.component.ts
@@ -70,10 +70,7 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
   }
   ngOnChanges(changes: SimpleChanges): void {
     if (prizmHasChanges(changes, 'selectedSwitcherIdx') && prizmHasChanges(changes, 'switchers')) {
-      const idx =
-        this.selectedSwitcherIdx <= this.switchers.length ? this.selectedSwitcherIdx : INITIAL_SWITHCER_INDEX;
-      const item = this.switchers[idx];
-      if (item) this.selectSwitcher(item, idx);
+      this.setActiveSwitcherOnChange();
     }
   }
   public selectSwitcher(item: PrizmSwitcherItem, idx: number): void {
@@ -97,4 +94,11 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
   public setDisabledState(isDisabled: boolean): void {
     this.cdRef.markForCheck();
   }
+
+  private setActiveSwitcherOnChange(): void {
+    const idx =
+      this.selectedSwitcherIdx <= this.switchers.length ? this.selectedSwitcherIdx : INITIAL_SWITHCER_INDEX;
+    const item = this.switchers[idx];
+    if (item) this.selectSwitcher(item, idx);
+  }
 }

From 6b41df0550fe5f94f85978266ca888c6ed0dd333 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Tue, 9 Jul 2024 16:04:14 +0300
Subject: [PATCH 4/5] fix(components/swithcer): switcher stters fix #1315

---
 .../components/switcher/switcher.component.ts | 73 ++++++++++++++-----
 1 file changed, 56 insertions(+), 17 deletions(-)

diff --git a/libs/components/src/lib/components/switcher/switcher.component.ts b/libs/components/src/lib/components/switcher/switcher.component.ts
index 0dc078b87d..dbf49b1c7a 100644
--- a/libs/components/src/lib/components/switcher/switcher.component.ts
+++ b/libs/components/src/lib/components/switcher/switcher.component.ts
@@ -5,22 +5,21 @@ import {
   EventEmitter,
   HostBinding,
   Input,
-  OnChanges,
+  OnInit,
   Optional,
   Output,
   Self,
-  SimpleChanges,
 } from '@angular/core';
 import { PrizmSwitcherItem, PrizmSwitcherSize, PrizmSwitcherType } from './switcher.interface';
 import { prizmDefaultProp } from '@prizm-ui/core';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { noop } from 'rxjs';
+import { BehaviorSubject, combineLatestWith, noop, takeUntil, tap } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { PrizmSwitcherItemComponent } from './components/switcher-item/switcher-item.component';
 import { PrizmSwitcherHintDirective } from './directives/switcher-hint.directive';
-import { prizmHasChanges } from '@prizm-ui/helpers';
 import { INITIAL_SWITHCER_INDEX } from './swithcer.const';
+import { PrizmDestroyService } from '@prizm-ui/helpers';
 
 @Component({
   selector: 'prizm-switcher',
@@ -29,8 +28,9 @@ import { INITIAL_SWITHCER_INDEX } from './swithcer.const';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [CommonModule, PrizmSwitcherHintDirective, PrizmSwitcherItemComponent],
+  providers: [PrizmDestroyService],
 })
-export class PrizmSwitcherComponent extends PrizmAbstractTestId implements ControlValueAccessor, OnChanges {
+export class PrizmSwitcherComponent extends PrizmAbstractTestId implements ControlValueAccessor, OnInit {
   @Input()
   @prizmDefaultProp()
   public size: PrizmSwitcherSize = 'l';
@@ -39,13 +39,28 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
   @prizmDefaultProp()
   public type: PrizmSwitcherType = 'inner';
 
+  private swithcers$: BehaviorSubject<PrizmSwitcherItem[]> = new BehaviorSubject<PrizmSwitcherItem[]>([]);
+
   @Input()
   @prizmDefaultProp()
-  public switchers: PrizmSwitcherItem[] = [];
+  public set switchers(value: PrizmSwitcherItem[]) {
+    if (value) this.swithcers$.next(value);
+  }
+  get switchers(): PrizmSwitcherItem[] {
+    return this.swithcers$.value;
+  }
+
+  private selectedSwitcherIdx$: BehaviorSubject<number> = new BehaviorSubject(INITIAL_SWITHCER_INDEX);
+  public selectedSwitcherIdx_ = INITIAL_SWITHCER_INDEX;
 
   @Input()
   @prizmDefaultProp()
-  public selectedSwitcherIdx: number = INITIAL_SWITHCER_INDEX;
+  public set selectedSwitcherIdx(value: number) {
+    this.selectedSwitcherIdx$.next(value);
+  }
+  get selectedSwitcherIdx(): number {
+    return this.selectedSwitcherIdx_;
+  }
 
   @Input()
   @HostBinding('class.full-width')
@@ -61,18 +76,19 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
 
   constructor(
     public readonly cdRef: ChangeDetectorRef,
-    @Optional() @Self() public readonly ngControl: NgControl
+    @Optional() @Self() public readonly ngControl: NgControl,
+    private readonly destroy$: PrizmDestroyService
   ) {
     super();
     if (this.ngControl != null) {
       this.ngControl.valueAccessor = this;
     }
   }
-  ngOnChanges(changes: SimpleChanges): void {
-    if (prizmHasChanges(changes, 'selectedSwitcherIdx') && prizmHasChanges(changes, 'switchers')) {
-      this.setActiveSwitcherOnChange();
-    }
+
+  ngOnInit(): void {
+    this.handleSwitchersUpdate();
   }
+
   public selectSwitcher(item: PrizmSwitcherItem, idx: number): void {
     if (this.ngControl?.disabled) return;
     if (item.disabled) return;
@@ -95,10 +111,33 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
     this.cdRef.markForCheck();
   }
 
-  private setActiveSwitcherOnChange(): void {
-    const idx =
-      this.selectedSwitcherIdx <= this.switchers.length ? this.selectedSwitcherIdx : INITIAL_SWITHCER_INDEX;
-    const item = this.switchers[idx];
-    if (item) this.selectSwitcher(item, idx);
+  private handleSwitchersUpdate() {
+    this.swithcers$
+      .pipe(
+        tap(switchers => {
+          if (!this.isIndexValid(this.selectedSwitcherIdx_, switchers)) {
+            this.selectedSwitcherIdx_ = INITIAL_SWITHCER_INDEX;
+          }
+        }),
+        combineLatestWith(this.selectedSwitcherIdx$),
+        tap(([switchers, selectedSwitcherIdx]) => {
+          if (!switchers.length) return;
+
+          if (!this.isIndexValid(selectedSwitcherIdx, switchers)) {
+            console.warn('selectedSwitcherIdx out of bound');
+            return;
+          }
+
+          this.selectedSwitcherIdx_ = selectedSwitcherIdx;
+
+          this.selectSwitcher(switchers[selectedSwitcherIdx], selectedSwitcherIdx);
+        }),
+        takeUntil(this.destroy$)
+      )
+      .subscribe();
+  }
+
+  private isIndexValid(idx: number, switchers: PrizmSwitcherItem[]): boolean {
+    return !!switchers[idx];
   }
 }

From 318395fbe029d2514274ec2a8e2645eacc9b40f1 Mon Sep 17 00:00:00 2001
From: "darina.reynish@idp.zyfra.com" <darina.reynish@idp.zyfra.com>
Date: Wed, 10 Jul 2024 13:41:20 +0300
Subject: [PATCH 5/5] fix(components/switcher): filter empty switcher array
 #1476

---
 .../switcher-async-example.component.html     | 18 +++++++++++---
 .../switcher-async-example.component.ts       |  5 ++++
 .../components/switcher/switcher.component.ts | 24 ++++++++++++-------
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
index 59f46f1f4d..5f97828202 100644
--- a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
+++ b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.html
@@ -1,19 +1,31 @@
 <h2>Static</h2>
 
-<prizm-switcher [switchers]="switchers" [selectedSwitcherIdx]="selectedIndex"></prizm-switcher>
+<prizm-switcher
+  [switchers]="switchers"
+  [selectedSwitcherIdx]="selectedIndex"
+  (selectedSwitcherIdxChange)="updateIdx($event)"
+></prizm-switcher>
 
 <br />
 <br />
 
 <h2>Async</h2>
-<prizm-switcher [switchers]="(switchers$ | async)!" [selectedSwitcherIdx]="selectedIndex"></prizm-switcher>
+<prizm-switcher
+  [switchers]="(switchers$ | async)!"
+  [selectedSwitcherIdx]="selectedIndex"
+  (selectedSwitcherIdxChange)="updateIdx($event)"
+></prizm-switcher>
 
 <br />
 <br />
 
 <h2>Inverse attribute ordering</h2>
 
-<prizm-switcher [selectedSwitcherIdx]="selectedIndex" [switchers]="switchers"></prizm-switcher>
+<prizm-switcher
+  [selectedSwitcherIdx]="selectedIndex"
+  [switchers]="switchers"
+  (selectedSwitcherIdxChange)="updateIdx($event)"
+></prizm-switcher>
 
 <br />
 <br />
diff --git a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
index 76dd331333..5d5d10c399 100644
--- a/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
+++ b/apps/doc/src/app/components/switcher/examples/switcher-async-example/switcher-async-example.component.ts
@@ -12,6 +12,7 @@ import { BehaviorSubject, switchMap, takeUntil, tap, timer } from 'rxjs';
 })
 export class SwitcherAsyncExampleComponent {
   public selectedIndex = 1;
+  public testIndex = this.selectedIndex;
   public readonly switchersSetA: PrizmSwitcherItem[] = [
     {
       title: 'Таблицы',
@@ -60,4 +61,8 @@ export class SwitcherAsyncExampleComponent {
       ? this.switchers$$.next(this.switchersSetB)
       : this.switchers$$.next(this.switchersSetA);
   }
+
+  public updateIdx(idx: number) {
+    this.selectedIndex = idx;
+  }
 }
diff --git a/libs/components/src/lib/components/switcher/switcher.component.ts b/libs/components/src/lib/components/switcher/switcher.component.ts
index dbf49b1c7a..5274d71f88 100644
--- a/libs/components/src/lib/components/switcher/switcher.component.ts
+++ b/libs/components/src/lib/components/switcher/switcher.component.ts
@@ -14,7 +14,7 @@ import { PrizmSwitcherItem, PrizmSwitcherSize, PrizmSwitcherType } from './switc
 import { prizmDefaultProp } from '@prizm-ui/core';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { BehaviorSubject, combineLatestWith, noop, takeUntil, tap } from 'rxjs';
+import { BehaviorSubject, combineLatestWith, filter, noop, takeUntil, tap } from 'rxjs';
 import { CommonModule } from '@angular/common';
 import { PrizmSwitcherItemComponent } from './components/switcher-item/switcher-item.component';
 import { PrizmSwitcherHintDirective } from './directives/switcher-hint.directive';
@@ -39,15 +39,15 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
   @prizmDefaultProp()
   public type: PrizmSwitcherType = 'inner';
 
-  private swithcers$: BehaviorSubject<PrizmSwitcherItem[]> = new BehaviorSubject<PrizmSwitcherItem[]>([]);
+  private switchers$: BehaviorSubject<PrizmSwitcherItem[]> = new BehaviorSubject<PrizmSwitcherItem[]>([]);
 
   @Input()
   @prizmDefaultProp()
   public set switchers(value: PrizmSwitcherItem[]) {
-    if (value) this.swithcers$.next(value);
+    if (value) this.switchers$.next(value);
   }
   get switchers(): PrizmSwitcherItem[] {
-    return this.swithcers$.value;
+    return this.switchers$.value;
   }
 
   private selectedSwitcherIdx$: BehaviorSubject<number> = new BehaviorSubject(INITIAL_SWITHCER_INDEX);
@@ -112,19 +112,21 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
   }
 
   private handleSwitchersUpdate() {
-    this.swithcers$
+    this.switchers$
       .pipe(
+        filter((switchers: PrizmSwitcherItem[]) => !!switchers.length),
         tap(switchers => {
           if (!this.isIndexValid(this.selectedSwitcherIdx_, switchers)) {
-            this.selectedSwitcherIdx_ = INITIAL_SWITHCER_INDEX;
+            this.selectSwitcher(switchers[INITIAL_SWITHCER_INDEX], INITIAL_SWITHCER_INDEX);
+            this.logIndexValidationError(
+              `selectedSwitcherIdx out of bound. Index has been reset to ${INITIAL_SWITHCER_INDEX}`
+            );
           }
         }),
         combineLatestWith(this.selectedSwitcherIdx$),
         tap(([switchers, selectedSwitcherIdx]) => {
-          if (!switchers.length) return;
-
           if (!this.isIndexValid(selectedSwitcherIdx, switchers)) {
-            console.warn('selectedSwitcherIdx out of bound');
+            this.logIndexValidationError('selectedSwitcherIdx out of bound');
             return;
           }
 
@@ -140,4 +142,8 @@ export class PrizmSwitcherComponent extends PrizmAbstractTestId implements Contr
   private isIndexValid(idx: number, switchers: PrizmSwitcherItem[]): boolean {
     return !!switchers[idx];
   }
+
+  private logIndexValidationError(errorMsg: string) {
+    console.warn(errorMsg);
+  }
 }