@ngrdt/tabs 0.0.1

package/src/lib/components/tab-container/rdt-tab-container.component.ts

@@ -0,0 +1,315 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  DestroyRef,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  inject,
+  Input,
+  Output,
+  QueryList,
+  Renderer2,
+  TemplateRef,
+  ViewChild,
+  ViewChildren,
+  ViewEncapsulation,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  canTransition$,
+  RDT_GUARDED_COMPONENT,
+  RdtChildDirective,
+} from '@ngrdt/core';
+import { RdtHTMLUtils } from '@ngrdt/utils';
+import { timer } from 'rxjs';
+import { RdtTabControllerDirective } from '../../directives/rdt-tab-controller.directive';
+import { RdtTabContainerState, RdtTabState } from '../../rdt-tabs-models';
+import { RdtTabComponent } from '../tab/rdt-tab.component';
+
+@Component({
+  selector: 'rdt-tab-container',
+  templateUrl: './rdt-tab-container.component.html',
+  styleUrls: ['./rdt-tab-container.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: RDT_GUARDED_COMPONENT,
+      useExisting: RdtTabContainerComponent,
+    },
+  ],
+  hostDirectives: [RdtChildDirective],
+  encapsulation: ViewEncapsulation.None,
+})
+export class RdtTabContainerComponent implements AfterContentInit {
+  readonly destroyRef = inject(DestroyRef);
+
+  @Input()
+  stateId: any = null;
+
+  @Input()
+  set value(val: string) {
+    if (this.activeTab && this.activeTab.stateId !== val) {
+      // TODO
+      //this.activeTab.onViewWillLeave();
+    }
+    this._value = val;
+    this.setCurrent();
+  }
+  get value() {
+    return this._value;
+  }
+  private _value!: string;
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  formAutofocus = true;
+
+  @Input()
+  panelPosition: 'left' | 'right' | 'top' | 'bottom' = 'top';
+
+  @Output()
+  valueChange = new EventEmitter();
+
+  @ContentChildren(RdtTabComponent)
+  tabsList!: QueryList<RdtTabComponent>;
+
+  @ViewChildren('headerButton')
+  tabHeaderButtons?: QueryList<ElementRef<HTMLElement>>;
+
+  @ViewChild('tabContent', { static: true })
+  tabContent!: ElementRef<HTMLElement>;
+
+  @HostBinding('class.active')
+  private _active = false;
+  get active() {
+    return this._active;
+  }
+  set active(value: boolean) {
+    this._active = value;
+    this.cd.markForCheck();
+  }
+
+  get isTopLevel(): boolean {
+    return !this.parentTab;
+  }
+
+  readonly parentTab = inject(RdtTabComponent, { optional: true });
+  readonly controller = inject(RdtTabControllerDirective, {
+    optional: true,
+  });
+  readonly cd = inject(ChangeDetectorRef);
+  readonly elRef = inject(ElementRef);
+  protected readonly renderer = inject(Renderer2);
+
+  protected currentTemplate: TemplateRef<any> | null = null;
+  protected currentTab: RdtTabComponent | null = null;
+
+  @HostBinding('class')
+  get classes() {
+    return `dp3-tab-container panel-${this.panelPosition}`;
+  }
+
+  @HostBinding('class.panel-horizontal')
+  get isHorizontal() {
+    return this.panelPosition === 'top' || this.panelPosition === 'bottom';
+  }
+
+  @HostBinding('class.panel-vertical')
+  get isVertical() {
+    return !this.isHorizontal;
+  }
+
+  @HostBinding('attr.role')
+  private attrRole = 'tablist';
+
+  get hasNonDisabledTabs() {
+    return this.tabsList.some((tab) => !tab.disabled);
+  }
+
+  get activeTab() {
+    return this.getTabByValue(this.value);
+  }
+
+  getTabByValue(value: string) {
+    return this.tabsList?.find((tab) => tab.stateId === value);
+  }
+
+  ngAfterContentInit() {
+    this.controller?.onTabContainerChanges();
+    timer(0)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.setCurrent());
+
+    this.tabsList.changes
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.controller?.onTabChanges();
+        this.setCurrent();
+        this.cd.markForCheck();
+      });
+
+    if (this.stateId === null && this.controller) {
+      const id = this.controller.getTabContainerIndex(this);
+      this.stateId = `tab-container-${id}`;
+    }
+  }
+
+  getState(): RdtTabContainerState {
+    return {
+      id: this.stateId,
+      value: this.value,
+      tabStates: this.tabsList.map((tab) => tab.getState()),
+    };
+  }
+
+  applyState(state: RdtTabContainerState) {
+    this.value = state.value;
+    this.scrollCurrentButtonIntoView();
+
+    const states: (RdtTabState | null)[] = [...state.tabStates];
+    const tabs: (RdtTabComponent | null)[] = this.tabsList.toArray();
+    const minLen = Math.min(states.length, tabs.length);
+
+    for (let i = 0; i < minLen; i++) {
+      if (tabs[i]!.stateId === states[i]!.id) {
+        tabs[i]!.applyState(states[i]!);
+        tabs[i] = states[i] = null;
+      }
+    }
+    tabs.forEach((tab, tabI) => {
+      if (!tab) {
+        return;
+      }
+      for (let offset = 0; offset < states.length; offset++) {
+        const prev = tabI - offset;
+        const next = tabI + offset;
+        if (prev > 0 && states[prev]?.id === tab.stateId) {
+          tab.applyState(states[prev]!);
+          states[prev] = null;
+          return;
+        } else if (next < states.length && states[next]?.id === tab.stateId) {
+          tab.applyState(states[next]!);
+          states[next] = null;
+          return;
+        }
+      }
+    });
+  }
+
+  scrollIntoView() {
+    this.elRef?.nativeElement?.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  activateTab(value: string) {
+    const nextTab = this.getTabByValue(value);
+
+    canTransition$(this.activeTab?.contDir, nextTab?.contDir).subscribe(
+      (res) => {
+        if (res) {
+          this.value = value;
+          this.valueChange.emit(value);
+        }
+      }
+    );
+  }
+
+  scrollCurrentButtonIntoView() {
+    if (!this.tabsList || !this.tabHeaderButtons) {
+      return;
+    }
+    const tabIndex = this.tabsList
+      .toArray()
+      .findIndex((tab) => tab.stateId === this.value);
+    const buttonRef = this.tabHeaderButtons.get(tabIndex);
+    if (buttonRef) {
+      RdtHTMLUtils.scrollIntoViewHorizontallyWithinParent(
+        buttonRef.nativeElement
+      );
+    }
+  }
+
+  @HostListener('click', ['$event'])
+  private onClick(event: PointerEvent) {
+    this.controller?.activateTabContainerFromClick(this, event.timeStamp);
+  }
+
+  private setCurrent() {
+    if (!this.tabsList) {
+      return;
+    }
+    if (this.value == undefined) {
+      const firstEnabled = this.getFirstEnabledTab();
+      if (firstEnabled) {
+        this.value = firstEnabled.stateId;
+      } else {
+        return;
+      }
+    }
+
+    const found = this.tabsList.find((tab) => tab.stateId === this.value);
+    if (!found) {
+      const first = this.getFirstEnabledTab();
+      if (first) {
+        this.activateTab(first.stateId);
+        return;
+      } else {
+        console.error(
+          'Active tab not found.',
+          this.tabsList.toArray(),
+          this.value
+        );
+        return;
+      }
+    }
+    this.setTab(found);
+  }
+
+  private setTab(tab: RdtTabComponent) {
+    if (this.currentTab !== tab) {
+      this.solidifyTabContentSize();
+      this.currentTab = tab;
+      this.currentTemplate = tab.templateRef;
+      this.cd.markForCheck();
+      //tab.onViewWillEnter();
+    }
+
+    if (this.formAutofocus && tab.formAutofocus) {
+      // Wait until template is attached to DOM
+      timer(0)
+        .pipe(
+          takeUntilDestroyed(this.destroyRef),
+          takeUntilDestroyed(tab.destroyRef)
+        )
+        .subscribe(() => tab.focusForm());
+    }
+
+    setTimeout(() => this.releaseTabContentSize());
+  }
+
+  // Swapping template in template outlet will cause large css recalc
+  // fix size to previous tab and in case they are the same size
+  // the recalc isn't noticable
+  private solidifyTabContentSize() {
+    const el = this.tabContent.nativeElement;
+    const bb = el.getBoundingClientRect();
+    this.renderer.setStyle(el, 'width', bb.width + 'px');
+    this.renderer.setStyle(el, 'height', bb.height + 'px');
+  }
+
+  private releaseTabContentSize() {
+    const el = this.tabContent.nativeElement;
+    this.renderer.removeStyle(el, 'width');
+    this.renderer.removeStyle(el, 'height');
+  }
+
+  private getFirstEnabledTab() {
+    return this.tabsList.find((t) => !t.disabled);
+  }
+}

package/src/lib/directives/rdt-destroy-inactive.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[rdtDestroyInactive]',
+})
+export class RdtDestroyInactiveDirective {
+  public readonly template = inject(TemplateRef);
+}