Fix/tab select scroll 1863 v5

apps/doc/src/app/components/tabs/tabs-example.component.html

@@ -88,6 +88,17 @@ <h2>
  content="Big Tab 2"
  >
  </prizm-tab>
+ <prizm-tab
+ *ngFor="let item of simpleTabs"
+ [icon]="icon"
+ [closable]="closable"
+ [type]="type"
+ [closeIcon]="$any(closeIcon)"
+ [disabled]="disabled"
+ [style.--prizm-tab-button-max-width]="prizmTabButtonMaxWidth"
+ [content]="item.title ?? ''"
+ >
+ </prizm-tab>
  </prizm-tabs>
  </div>
  </prizm-doc-demo>

apps/doc/src/app/components/tabs/tabs-example.component.ts

@@ -4,6 +4,7 @@ import {
  PrizmTabCanOpen,
  PrizmTabComponent,
  PrizmTabCounterOptions,
+ PrizmTabItem,
  PrizmTabSize,
  PrizmTabType,
 } from '@prizm-ui/components';
@@ -67,6 +68,33 @@ export class TabsExampleComponent {
  },
  ];
 
+ public simpleTabs: PrizmTabItem[] = [
+ {
+ title: 'Вкладка 3',
+ },
+ {
+ title: 'Вкладка 4',
+ },
+ {
+ title: 'Вкладка 5',
+ },
+ {
+ title: 'Вкладка 6',
+ },
+ {
+ title: 'Вкладка 7',
+ },
+ {
+ title: 'Вкладка 8',
+ },
+ {
+ title: 'Вкладка 9',
+ },
+ {
+ title: 'Вкладка 10',
+ },
+ ];
+
  public readonly tabsExampleBasic: TuiDocExample = {
  TypeScript: import('./examples/tabs-example-basic/tabs-example-basic.component?raw'),
  HTML: import('./examples/tabs-example-basic/tabs-example-basic.component.html?raw'),

libs/components/src/lib/components/listing-item/listing-item.component.less

@@ -1,5 +1,10 @@
 :host {
  background-color: var(--prizm-background-fill-overlay);
+
+ &.disabled {
+ pointer-events: none;
+ }
+
  .item-container {
  display: flex;
  align-items: center;

libs/components/src/lib/components/listing-item/listing-item.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { PolymorphOutletDirective } from '../../directives';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -13,6 +13,7 @@ import { CommonModule } from '@angular/common';
  imports: [CommonModule, PolymorphOutletDirective],
 })
 export class PrizmListingItemComponent extends PrizmAbstractTestId {
+ @HostBinding('class.disabled')
  @Input()
  get disabled() {
  return this._disabled;
@@ -29,6 +30,7 @@ export class PrizmListingItemComponent extends PrizmAbstractTestId {
  set selected(value: BooleanInput) {
  this._selected = coerceBooleanProperty(value);
  }
+
  private _selected = false;
 
  override readonly testId_ = 'ui_listing_item';

libs/components/src/lib/components/tabs/tabs.component.ts

@@ -82,6 +82,7 @@ export class PrizmTabsComponent extends PrizmAbstractTestId implements OnInit, O
  this.activeTabIndexLastChanged = idx;
  if (idx === this.tabsService.activeTabIdx) return;
  this.tabsService.updateActiveTab(idx);
+ this.focusTabByIdx(idx);
  }
  get activeTabIndex(): number {
  return this.tabsService.activeTabIdx;
@@ -155,19 +156,6 @@ export class PrizmTabsComponent extends PrizmAbstractTestId implements OnInit, O
  );
  }
 
- private initTabClickListener(): void {
- this.tabsService.activeTabIdx$
- .pipe(
- skip(1),
- debounceTime(0),
- tap(idx => {
- this.tabClickHandler(idx);
- }),
- takeUntil(this.destroy$)
- )
- .subscribe();
- }
-
  public ngOnDestroy(): void {
  this.mutationObserver?.disconnect();
  this.resizeObserver?.disconnect();
@@ -198,12 +186,45 @@ export class PrizmTabsComponent extends PrizmAbstractTestId implements OnInit, O
  tabsContainerElement.scrollLeft = scrollLeft;
  }
 
- private calculateControlsState(scrollLeft: number): void {
- const tabsContainerElement: HTMLElement = this.tabsContainer.nativeElement;
- const scrollWidth = tabsContainerElement.scrollWidth;
- const offsetWidth = tabsContainerElement.offsetWidth;
- this.isLeftBtnActive = scrollLeft > 20;
- this.isRightBtnActive = scrollWidth - offsetWidth - scrollLeft > 20;
+ public reCalculatePositions(): void {
+ (this.tabsDropdown ?? this.tabsMoreDropdown)?.reCalculatePositions();
+ }
+
+ public closeTab(idx: number): void {
+ const tab = this.tabsService.getTabByIdx(idx);
+
+ this.tabsService.getTabByIdx(idx)?.closeTab.emit();
+ this.tabsService.removeTab(tab);
+ this.reCalculatePositions();
+ }
+
+ public clickTab(index: number): void {
+ this.openLeft = this.openRight = false;
+ this.tabClickHandler(index);
+ }
+
+ private initTabClickListener(): void {
+ this.tabsService.activeTabIdx$
+ .pipe(
+ skip(1),
+ debounceTime(0),
+ tap(idx => {
+ this.tabClickHandler(idx);
+ }),
+ takeUntil(this.destroy$)
+ )
+ .subscribe();
+ }
+
+ private focusTabByIdx(idx: number): void {
+ if (!this.tabElements?.length) return;
+ const selectedTabElement = this.tabElements.find((item, index) => index === idx)?.el.nativeElement;
+ if (!selectedTabElement) return;
+ this.tabsContainer.nativeElement.scrollLeft =
+ selectedTabElement.offsetLeft -
+ this.tabsContainer.nativeElement.offsetWidth / 2 +
+ selectedTabElement.offsetWidth / 2;
+ this.mutationDetector$.next();
  }
 
  private overflowChecker(): void {
@@ -231,28 +252,11 @@ export class PrizmTabsComponent extends PrizmAbstractTestId implements OnInit, O
  this.cdRef.markForCheck();
  }
 
- private focusTabByIdx(idx: number): void {
- if (!this.tabElements?.length) return;
- const selectedTabElement = this.tabElements.find((item, index) => index === idx)?.el.nativeElement;
- if (!selectedTabElement) return;
- this.tabsContainer.nativeElement.scrollLeft =
- selectedTabElement.offsetLeft -
- this.tabsContainer.nativeElement.offsetWidth / 2 +
- selectedTabElement.offsetWidth / 2;
- this.mutationDetector$.next();
- }
-
- public reCalculatePositions(): void {
- (this.tabsDropdown ?? this.tabsMoreDropdown)?.reCalculatePositions();
- }
-
- public closeTab(idx: number): void {
- this.tabsService.getTabByIdx(idx)?.closeTab.emit();
- this.reCalculatePositions();
- }
-
- public clickTab(index: number): void {
- this.openLeft = this.openRight = false;
- this.tabClickHandler(index);
+ private calculateControlsState(scrollLeft: number): void {
+ const tabsContainerElement: HTMLElement = this.tabsContainer.nativeElement;
+ const scrollWidth = tabsContainerElement.scrollWidth;
+ const offsetWidth = tabsContainerElement.offsetWidth;
+ this.isLeftBtnActive = scrollLeft > 20;
+ this.isRightBtnActive = scrollWidth - offsetWidth - scrollLeft > 20;
  }
 }