@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/tabs/components/inline-tabs/inline-tabs.component.ts

@@ -0,0 +1,316 @@
+import { A11yModule, FocusOrigin } from '@angular/cdk/a11y';
+import { PortalModule } from '@angular/cdk/portal';
+import { NgClass } from '@angular/common';
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  TrackByFunction,
+  ViewChild,
+  ViewEncapsulation,
+  booleanAttribute,
+  inject,
+  numberAttribute,
+} from '@angular/core';
+import { NgClassType, TypedQueryList } from '@ethlete/core';
+import { Subscription, merge, startWith } from 'rxjs';
+import { InlineTabComponent, TAB_GROUP } from '../../partials/inline-tabs/inline-tab';
+import { InlineTabBodyComponent } from '../../partials/inline-tabs/inline-tab-body';
+import { InlineTabHeaderComponent } from '../../partials/inline-tabs/inline-tab-header';
+import { InlineTabLabelWrapperDirective } from '../../partials/inline-tabs/inline-tab-label-wrapper';
+
+let nextId = 0;
+
+export class InlineTabChangeEvent {
+  index!: number;
+  tab!: InlineTabComponent;
+}
+
+interface InlineTabsBaseHeader {
+  _alignInkBarToSelectedTab(): void;
+  updatePagination(): void;
+  focusIndex: number;
+}
+
+@Component({
+  selector: 'et-inline-tabs',
+  templateUrl: 'inline-tabs.component.html',
+  styleUrls: ['inline-tabs.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Default,
+  providers: [
+    {
+      provide: TAB_GROUP,
+      useExisting: InlineTabsComponent,
+    },
+  ],
+  standalone: true,
+  imports: [
+    InlineTabHeaderComponent,
+    NgClass,
+    InlineTabLabelWrapperDirective,
+    A11yModule,
+    InlineTabBodyComponent,
+    PortalModule,
+  ],
+  host: {
+    class: 'et-inline-tabs',
+  },
+})
+export class InlineTabsComponent implements AfterContentInit, AfterContentChecked, OnDestroy {
+  private _cdr = inject(ChangeDetectorRef);
+
+  @Input({ transform: numberAttribute })
+  selectedIndex: number | null = null;
+
+  @Input({ transform: numberAttribute })
+  contentTabIndex: number | null = null;
+
+  @Input({ transform: booleanAttribute })
+  preserveContent = false;
+
+  @Input()
+  tabHeaderClasses: NgClassType;
+
+  @Input()
+  itemSize: 'auto' | 'same' = 'auto';
+
+  @Input()
+  scrollableClass?: NgClassType;
+
+  @Input({ transform: booleanAttribute })
+  renderMasks = true;
+
+  @Input({ transform: booleanAttribute })
+  renderButtons = true;
+
+  @Input({ transform: booleanAttribute })
+  renderScrollbars = false;
+
+  @Output()
+  readonly selectedIndexChange = new EventEmitter<number>();
+
+  @Output()
+  readonly focusChange = new EventEmitter<InlineTabChangeEvent>();
+
+  @Output()
+  readonly selectedTabChange = new EventEmitter<InlineTabChangeEvent>(true);
+
+  @ContentChildren(InlineTabComponent, { descendants: true })
+  _allTabs!: TypedQueryList<InlineTabComponent>;
+
+  @ViewChild('tabBodyWrapper')
+  _tabBodyWrapper: ElementRef<HTMLElement> | null = null;
+
+  @ViewChild('tabHeader')
+  _tabHeader!: InlineTabsBaseHeader;
+
+  _tabs: TypedQueryList<InlineTabComponent> = new TypedQueryList<InlineTabComponent>();
+
+  private _groupId = nextId++;
+  private _lastFocusedTabIndex: number | null = null;
+  private _tabsSubscription = Subscription.EMPTY;
+  private _tabLabelSubscription = Subscription.EMPTY;
+
+  ngAfterContentInit() {
+    this._subscribeToAllTabChanges();
+    this._subscribeToTabLabels();
+
+    this._tabsSubscription = this._tabs.changes.subscribe(() => {
+      const indexToSelect = this._clampTabIndex(this.selectedIndex);
+
+      if (indexToSelect === this.selectedIndex) {
+        const tabs = this._tabs.toArray();
+        let selectedTab: InlineTabComponent | undefined;
+
+        for (let i = 0; i < tabs.length; i++) {
+          if (tabs[i]?.isActive) {
+            this.selectedIndex = i;
+            this._lastFocusedTabIndex = null;
+            selectedTab = tabs[i];
+            break;
+          }
+        }
+
+        if (!selectedTab && tabs[indexToSelect]) {
+          Promise.resolve().then(() => {
+            const t = tabs[indexToSelect];
+
+            if (!t) return;
+
+            t.isActive = true;
+            this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
+            this.selectedIndexChange.emit(indexToSelect);
+          });
+        }
+      }
+
+      this._cdr.markForCheck();
+    });
+  }
+
+  ngAfterContentChecked() {
+    const indexToSelect = (this.selectedIndex = this._clampTabIndex(this.selectedIndex));
+
+    if (this.selectedIndex != indexToSelect && this._tabBodyWrapper) {
+      const isFirstRun = this.selectedIndex == null;
+
+      if (!isFirstRun) {
+        this.selectedTabChange.emit(this._createChangeEvent(indexToSelect));
+
+        const wrapper = this._tabBodyWrapper?.nativeElement;
+        wrapper.style.minHeight = wrapper.clientHeight + 'px';
+      }
+
+      Promise.resolve().then(() => {
+        this._tabs
+          .filter((t): t is InlineTabComponent => !!t)
+          .forEach((tab, index) => (tab.isActive = index === indexToSelect));
+
+        if (!isFirstRun) {
+          this.selectedIndexChange.emit(indexToSelect);
+
+          if (this._tabBodyWrapper) {
+            this._tabBodyWrapper.nativeElement.style.minHeight = '';
+          }
+        }
+      });
+    }
+
+    this._tabs.forEach((tab, index) => {
+      if (!tab) return;
+
+      tab.position = index - indexToSelect;
+
+      if (this.selectedIndex != null && tab.position == 0 && !tab.origin) {
+        tab.origin = indexToSelect - this.selectedIndex;
+      }
+    });
+
+    if (this.selectedIndex !== indexToSelect) {
+      this.selectedIndex = indexToSelect;
+      this._lastFocusedTabIndex = null;
+      this._cdr.markForCheck();
+    }
+  }
+
+  ngOnDestroy() {
+    this._tabs.destroy();
+    this._tabsSubscription.unsubscribe();
+    this._tabLabelSubscription.unsubscribe();
+  }
+
+  trackByTabFn: TrackByFunction<InlineTabComponent> = (index) => index;
+
+  realignInkBar() {
+    if (this._tabHeader) {
+      this._tabHeader._alignInkBarToSelectedTab();
+    }
+  }
+
+  updatePagination() {
+    if (this._tabHeader) {
+      this._tabHeader.updatePagination();
+    }
+  }
+
+  focusTab(index: number) {
+    const header = this._tabHeader;
+
+    if (header) {
+      header.focusIndex = index;
+    }
+  }
+
+  _focusChanged(index: number) {
+    this._lastFocusedTabIndex = index;
+    this.focusChange.emit(this._createChangeEvent(index));
+  }
+
+  _getTabLabelId(i: number): string {
+    return `et-inline-tab-label-${this._groupId}-${i}`;
+  }
+
+  _getTabContentId(i: number): string {
+    return `et-inline-tab-content-${this._groupId}-${i}`;
+  }
+
+  _handleClick(tab: InlineTabComponent, tabHeader: InlineTabsBaseHeader, index: number) {
+    if (!tab.disabled && this.selectedIndex !== index) {
+      this.selectedIndex = tabHeader.focusIndex = index;
+      this.selectedIndexChange.emit(index);
+      this.selectedTabChange.emit(this._createChangeEvent(index));
+    }
+  }
+
+  _handleEnter(index: number) {
+    const tab = this._tabs.toArray()[index];
+    if (!tab || tab.disabled || this.selectedIndex === index) return;
+
+    this.selectedIndex = index;
+    this.selectedIndexChange.emit(index);
+    this.selectedTabChange.emit(this._createChangeEvent(index));
+  }
+
+  _getTabIndex(tab: InlineTabComponent, index: number): number | null {
+    if (tab.disabled) {
+      return null;
+    }
+    const targetIndex = this._lastFocusedTabIndex ?? this.selectedIndex;
+    return index === targetIndex ? 0 : -1;
+  }
+
+  _tabFocusChanged(focusOrigin: FocusOrigin, index: number) {
+    if (focusOrigin && focusOrigin !== 'mouse' && focusOrigin !== 'touch') {
+      this._tabHeader.focusIndex = index;
+    }
+  }
+
+  private _subscribeToAllTabChanges() {
+    this._allTabs.changes.pipe(startWith(this._allTabs)).subscribe((tabs) => {
+      this._tabs.reset(
+        tabs
+          .filter((t): t is InlineTabComponent => !!t)
+          .filter((tab) => {
+            return tab._closestTabGroup === this || !tab._closestTabGroup;
+          }),
+      );
+      this._tabs.notifyOnChanges();
+    });
+  }
+
+  private _clampTabIndex(index: number | null): number {
+    return Math.min(this._tabs.length - 1, Math.max(index || 0, 0));
+  }
+
+  private _subscribeToTabLabels() {
+    if (this._tabLabelSubscription) {
+      this._tabLabelSubscription.unsubscribe();
+    }
+
+    this._tabLabelSubscription = merge(
+      ...this._tabs.filter((t): t is InlineTabComponent => !!t).map((tab) => tab._stateChanges),
+    ).subscribe(() => this._cdr.markForCheck());
+  }
+
+  private _createChangeEvent(index: number): InlineTabChangeEvent {
+    const event = new InlineTabChangeEvent();
+    event.index = index;
+    if (this._tabs && this._tabs.length) {
+      const tab = this._tabs.toArray()[index];
+
+      if (tab) {
+        event.tab = tab;
+      }
+    }
+    return event;
+  }
+}

package/src/lib/components/tabs/components/nav-tabs/nav-tabs.component.docs.mdx

@@ -0,0 +1,26 @@
+# Nav tabs
+
+The nav tabs component is a container that holds a number of tabs.
+It uses a `router-outlet` to display the content of the tab.
+
+When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left and right across the labels.
+
+### Basic usage
+
+```html
+<nav [tabOutlet]="tabOutlet" et-nav-tabs>
+  <a et-nav-tab-link routerLink="./one">One</a>
+  <a et-nav-tab-link routerLink="./two">Two</a>
+  <a et-nav-tab-link routerLink="./three">Three</a>
+  <a et-nav-tab-link routerLink="./four">Four</a>
+  <a et-nav-tab-link routerLink="./five" disabled>Five</a>
+</nav>
+
+<et-nav-tabs-outlet #tabOutlet>
+  <router-outlet></router-outlet>
+</et-nav-tabs-outlet>
+```
+
+#### Related docs:
+
+- [Inline tabs](/story/cdk-tabs-inline--default)

package/src/lib/components/tabs/components/nav-tabs/nav-tabs.component.html

@@ -0,0 +1,11 @@
+<et-scrollable
+  [itemSize]="itemSize"
+  [renderButtons]="renderButtons"
+  [scrollableClass]="scrollableClass"
+  [renderMasks]="renderMasks"
+  [renderScrollbars]="renderScrollbars"
+  (keydown)="_handleKeydown($event)"
+  (contentChanged)="_onContentChanges()"
+>
+  <ng-content />
+</et-scrollable>

package/src/lib/components/tabs/components/nav-tabs/nav-tabs.component.stories.ts

@@ -0,0 +1,46 @@
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { Meta, StoryFn, applicationConfig } from '@storybook/angular';
+import CustomMDXDocumentation from './nav-tabs.component.docs.mdx';
+import { TabNavPanelStorybookComponent } from './storybook/nav-tabs-storybook.component';
+import {
+  RouterFourComponent,
+  RouterOneComponent,
+  RouterThreeComponent,
+  RouterTwoComponent,
+} from './storybook/router-components';
+
+export default {
+  title: 'CDK/Tabs/Navigation',
+  component: TabNavPanelStorybookComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        provideAnimations(),
+        provideRouter(
+          [
+            { path: 'one', component: RouterOneComponent },
+            { path: 'two', component: RouterTwoComponent },
+            { path: 'three', component: RouterThreeComponent },
+            { path: 'four', component: RouterFourComponent },
+          ],
+          withHashLocation(),
+        ),
+      ],
+    }),
+  ],
+  parameters: {
+    docs: {
+      page: CustomMDXDocumentation,
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args) => ({
+  props: args,
+});
+
+export const Default = {
+  render: Template,
+  args: {},
+};

package/src/lib/components/tabs/components/nav-tabs/nav-tabs.component.ts

@@ -0,0 +1,121 @@
+import { NgClass } from '@angular/common';
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  forwardRef,
+  HostBinding,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { filter, startWith, takeUntil, tap } from 'rxjs';
+import { ScrollableComponent } from '../../../scrollable/components/scrollable';
+import { NavTabLinkComponent } from '../../partials/nav-tabs/nav-tab-link';
+import { NavTabsOutletComponent } from '../../partials/nav-tabs/nav-tabs-outlet';
+import { ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, PaginatedTabHeaderDirective } from '../../utils';
+
+@Component({
+  selector: '[et-nav-tabs]',
+  templateUrl: 'nav-tabs.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Default,
+  standalone: true,
+  imports: [ScrollableComponent, NgClass, ScrollObserverIgnoreTargetDirective],
+  host: {
+    class: 'et-nav-tabs',
+  },
+})
+export class NavTabsComponent
+  extends PaginatedTabHeaderDirective
+  implements OnInit, AfterContentChecked, AfterContentInit, OnDestroy
+{
+  private _router = inject(Router);
+
+  @Input()
+  tabOutlet?: NavTabsOutletComponent;
+
+  @ContentChildren(forwardRef(() => NavTabLinkComponent), { descendants: true })
+  _items!: TypedQueryList<NavTabLinkComponent>;
+
+  @ContentChildren(forwardRef(() => ActiveTabUnderlineDirective), { descendants: true })
+  _inkBars!: TypedQueryList<ActiveTabUnderlineDirective>;
+
+  @ViewChild(ScrollableComponent, { static: true })
+  _scrollable!: ScrollableComponent;
+
+  _activeTabUnderlineManager?: ActiveTabUnderlineBarManager;
+
+  @HostBinding('attr.role')
+  get _attrRole() {
+    return this._getRole();
+  }
+
+  ngOnInit(): void {
+    this._router.events
+      .pipe(
+        filter((e): e is NavigationEnd => e instanceof NavigationEnd),
+        tap(() => this.updateActiveLink()),
+        takeUntil(this._destroy$),
+      )
+      .subscribe();
+  }
+
+  protected _itemSelected() {
+    // noop
+  }
+
+  override ngAfterContentInit() {
+    this._activeTabUnderlineManager = new ActiveTabUnderlineBarManager(this._inkBars);
+    this._items.changes
+      .pipe(
+        startWith(this._items.toArray()),
+        tap(() => this.updateActiveLink()),
+        takeUntil(this._destroy$),
+      )
+      .subscribe();
+
+    super.ngAfterContentInit();
+  }
+
+  updateActiveLink() {
+    if (!this._items) {
+      return;
+    }
+
+    const items = this._items.toArray();
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+
+      if (!item) {
+        continue;
+      }
+
+      if (item?.active) {
+        this.selectedIndex = i;
+        this._cdr.markForCheck();
+
+        if (this.tabOutlet) {
+          this.tabOutlet._activeTabId = item.id;
+        }
+
+        return;
+      }
+    }
+
+    this.selectedIndex = -1;
+    this._activeTabUnderlineManager?.hide();
+  }
+
+  _getRole(): string | null {
+    return this.tabOutlet ? 'tablist' : this._elementRef.nativeElement.getAttribute('role');
+  }
+}

package/src/lib/components/tabs/components/nav-tabs/storybook/nav-tabs-storybook.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { NavTabLinkComponent } from '../../../partials/nav-tabs/nav-tab-link';
+import { NavTabsOutletComponent } from '../../../partials/nav-tabs/nav-tabs-outlet';
+import { NavTabsComponent } from '../nav-tabs.component';
+
+@Component({
+  selector: 'et-nav-tabs-outlet-storybook',
+  template: `
+    <nav [tabOutlet]="tabOutlet" et-nav-tabs>
+      <a et-nav-tab-link routerLink="./one"> Tab One</a>
+      <a et-nav-tab-link routerLink="./two"> Other Tab</a>
+      <a et-nav-tab-link routerLink="./three"> One more Tab</a>
+      <a et-nav-tab-link routerLink="./four">Tab</a>
+      <a et-nav-tab-link disabled>Disabled Tab</a>
+    </nav>
+
+    <et-nav-tabs-outlet #tabOutlet>
+      <router-outlet />
+    </et-nav-tabs-outlet>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NavTabsComponent, NavTabsOutletComponent, NavTabLinkComponent, RouterModule],
+})
+export class TabNavPanelStorybookComponent implements OnInit {
+  private _router = inject(Router);
+
+  ngOnInit(): void {
+    this._router.navigate(['./one']);
+  }
+}

package/src/lib/components/tabs/components/nav-tabs/storybook/router-components.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'et-router-component-one',
+  template: `<h1>One</h1>`,
+  standalone: true,
+})
+export class RouterOneComponent {}
+
+@Component({
+  selector: 'et-router-component-two',
+  template: `<h1>Two</h1>`,
+  standalone: true,
+})
+export class RouterTwoComponent {}
+
+@Component({
+  selector: 'et-router-component-three',
+  template: `<h1>Three</h1>`,
+  standalone: true,
+})
+export class RouterThreeComponent {}
+
+@Component({
+  selector: 'et-router-component-four',
+  template: `<h1>Four</h1>`,
+  standalone: true,
+})
+export class RouterFourComponent {}

package/src/lib/components/tabs/partials/inline-tabs/inline-tab/inline-tab.component.html

@@ -0,0 +1 @@
+<ng-template><ng-content /></ng-template>

package/src/lib/components/tabs/partials/inline-tabs/inline-tab/inline-tab.component.ts

@@ -0,0 +1,114 @@
+import { TemplatePortal } from '@angular/cdk/portal';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Inject,
+  InjectionToken,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Optional,
+  SimpleChanges,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
+  booleanAttribute,
+} from '@angular/core';
+import { NgClassType } from '@ethlete/core';
+import { Subject } from 'rxjs';
+import { TAB_CONTENT } from '../inline-tab-content';
+import { InlineTabLabelDirective, TAB, TAB_LABEL } from '../inline-tab-label';
+
+export const TAB_GROUP = new InjectionToken<unknown>('TAB_GROUP');
+
+@Component({
+  selector: 'et-inline-tab',
+  templateUrl: 'inline-tab.component.html',
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.None,
+  providers: [{ provide: TAB, useExisting: InlineTabComponent }],
+  standalone: true,
+  host: {
+    class: 'et-inline-tab',
+  },
+})
+export class InlineTabComponent implements OnInit, OnChanges, OnDestroy {
+  @ContentChild(TAB_LABEL)
+  get templateLabel(): InlineTabLabelDirective {
+    return this._templateLabel;
+  }
+  set templateLabel(value: InlineTabLabelDirective) {
+    this._setTemplateLabelInput(value);
+  }
+  protected _templateLabel!: InlineTabLabelDirective;
+
+  @Input({ transform: booleanAttribute })
+  fitUnderlineToContent = false;
+
+  @ContentChild(TAB_CONTENT, { read: TemplateRef, static: true })
+  _explicitContent!: TemplateRef<unknown>;
+
+  @ViewChild(TemplateRef, { static: true })
+  _implicitContent!: TemplateRef<unknown>;
+
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('label')
+  textLabel = '';
+
+  @Input('aria-label')
+  ariaLabel!: string;
+
+  @Input('aria-labelledby')
+  ariaLabelledby!: string;
+
+  @Input()
+  labelClass: NgClassType;
+
+  @Input()
+  bodyClass: NgClassType;
+
+  @Input({ transform: booleanAttribute })
+  disabled = false;
+
+  private _contentPortal: TemplatePortal | null = null;
+
+  get content(): TemplatePortal | null {
+    return this._contentPortal;
+  }
+
+  readonly _stateChanges = new Subject<void>();
+
+  position: number | null = null;
+
+  origin: number | null = null;
+
+  isActive = false;
+
+  constructor(
+    private _viewContainerRef: ViewContainerRef,
+    @Inject(TAB_GROUP) @Optional() public _closestTabGroup: unknown,
+  ) {}
+
+  ngOnInit(): void {
+    this._contentPortal = new TemplatePortal(this._explicitContent || this._implicitContent, this._viewContainerRef);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['textLabel'] || changes['disabled']) {
+      this._stateChanges.next();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this._stateChanges.complete();
+  }
+
+  protected _setTemplateLabelInput(value: InlineTabLabelDirective | undefined) {
+    if (value && value._closestTab === this) {
+      this._templateLabel = value;
+    }
+  }
+}