@ethlete/cdk 4.28.0 → 4.28.1

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

@@ -1,12 +0,0 @@
-<div
-  #content
-  [@translateTab]="{
-    value: _position,
-    params: { animationDuration: '0ms' },
-  }"
-  (@translateTab.start)="_onTranslateTabStarted($event)"
-  (@translateTab.done)="_translateTabComplete.next($event)"
-  cdkScrollable
->
-  <ng-template etInlineTabBodyHost />
-</div>

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

@@ -1,174 +0,0 @@
-import { AnimationEvent } from '@angular/animations';
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  ViewChild,
-  ViewEncapsulation,
-  inject,
-} from '@angular/core';
-import { Subject, Subscription, distinctUntilChanged, startWith } from 'rxjs';
-import { tabAnimations } from '../../../animations';
-import { InlineTabBodyHostDirective } from '../inline-tab-body-host';
-
-export type InlineTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center';
-
-export type InlineTabBodyOriginState = 'left' | 'right';
-
-@Component({
-  selector: 'et-inline-tab-body',
-  templateUrl: 'inline-tab-body.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.Default,
-  animations: [tabAnimations.translateTab],
-  standalone: true,
-  imports: [CdkScrollableModule, InlineTabBodyHostDirective],
-  host: {
-    class: 'et-inline-tab-body',
-  },
-})
-export class InlineTabBodyComponent implements OnInit, OnDestroy {
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private _dir = inject(Directionality);
-  private _cdr = inject(ChangeDetectorRef);
-
-  private _positionIndex!: number;
-  private _centeringSub = Subscription.EMPTY;
-  private _leavingSub = Subscription.EMPTY;
-  private _dirChangeSubscription = Subscription.EMPTY;
-
-  _position!: InlineTabBodyPositionState;
-
-  readonly _translateTabComplete = new Subject<AnimationEvent>();
-
-  @Output()
-  readonly _onCentering = new EventEmitter<number>();
-
-  @Output()
-  readonly _beforeCentering = new EventEmitter<boolean>();
-
-  @Output()
-  readonly _afterLeavingCenter = new EventEmitter<void>();
-
-  @Output()
-  readonly _onCentered = new EventEmitter<void>(true);
-
-  @ViewChild(InlineTabBodyHostDirective, { static: true })
-  _portalHost!: InlineTabBodyHostDirective;
-
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('content')
-  _content!: TemplatePortal;
-
-  @Input()
-  origin!: number | null;
-
-  @Input()
-  animationDuration = '500ms';
-
-  @Input()
-  preserveContent = false;
-
-  @Input()
-  set position(position: number) {
-    this._positionIndex = position;
-    this._computePositionAnimationState();
-  }
-
-  constructor() {
-    if (this._dir) {
-      this._dirChangeSubscription = this._dir.change.subscribe((dir: Direction) => {
-        this._computePositionAnimationState(dir);
-        this._cdr.markForCheck();
-      });
-    }
-
-    this._translateTabComplete
-      .pipe(
-        distinctUntilChanged((x, y) => {
-          return x.fromState === y.fromState && x.toState === y.toState;
-        }),
-      )
-      .subscribe((event) => {
-        if (this._isCenterPosition(event.toState) && this._isCenterPosition(this._position)) {
-          this._onCentered.emit();
-        }
-
-        if (this._isCenterPosition(event.fromState) && !this._isCenterPosition(this._position)) {
-          this._afterLeavingCenter.emit();
-        }
-      });
-  }
-
-  ngOnInit() {
-    if (this._position == 'center' && this.origin != null) {
-      this._position = this._computePositionFromOrigin(this.origin);
-    }
-
-    this._centeringSub = this._beforeCentering
-      .pipe(startWith(this._isCenterPosition(this._position)))
-      .subscribe((isCentering: boolean) => {
-        if (isCentering && !this._portalHost.hasAttached()) {
-          this._portalHost.attach(this._content);
-        }
-      });
-
-    this._leavingSub = this._afterLeavingCenter.subscribe(() => {
-      if (!this.preserveContent) {
-        this._portalHost.detach();
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    this._dirChangeSubscription.unsubscribe();
-    this._translateTabComplete.complete();
-    this._centeringSub.unsubscribe();
-    this._leavingSub.unsubscribe();
-  }
-
-  _onTranslateTabStarted(event: AnimationEvent): void {
-    const isCentering = this._isCenterPosition(event.toState);
-    this._beforeCentering.emit(isCentering);
-    if (isCentering) {
-      this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
-    }
-  }
-
-  _getLayoutDirection(): Direction {
-    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-  }
-
-  _isCenterPosition(position: InlineTabBodyPositionState | string): boolean {
-    return position == 'center' || position == 'left-origin-center' || position == 'right-origin-center';
-  }
-
-  private _computePositionAnimationState(dir: Direction = this._getLayoutDirection()) {
-    if (this._positionIndex < 0) {
-      this._position = dir == 'ltr' ? 'left' : 'right';
-    } else if (this._positionIndex > 0) {
-      this._position = dir == 'ltr' ? 'right' : 'left';
-    } else {
-      this._position = 'center';
-    }
-  }
-
-  private _computePositionFromOrigin(origin: number): InlineTabBodyPositionState {
-    const dir = this._getLayoutDirection();
-
-    if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {
-      return 'left-origin-center';
-    }
-
-    return 'right-origin-center';
-  }
-}

package/src/lib/components/tabs/partials/inline-tabs/inline-tab-body-host/inline-tab-body-host.directive.ts

@@ -1,20 +0,0 @@
-import { CdkPortalOutlet } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
-import { ComponentFactoryResolver, Directive, Inject, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
-
-@Directive({
-  selector: '[etInlineTabBodyHost]',
-  standalone: true,
-  host: {
-    class: 'et-inline-tab-body-host',
-  },
-})
-export class InlineTabBodyHostDirective extends CdkPortalOutlet implements OnInit, OnDestroy {
-  constructor(
-    componentFactoryResolver: ComponentFactoryResolver,
-    viewContainerRef: ViewContainerRef,
-    @Inject(DOCUMENT) _document: Document,
-  ) {
-    super(componentFactoryResolver, viewContainerRef, _document);
-  }
-}

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

@@ -1,15 +0,0 @@
-import { Directive, InjectionToken, TemplateRef, inject } from '@angular/core';
-
-export const TAB_CONTENT = new InjectionToken<InlineTabContentDirective>('TabContent');
-
-@Directive({
-  selector: '[etInlineTabContent]',
-  providers: [{ provide: TAB_CONTENT, useExisting: InlineTabContentDirective }],
-  standalone: true,
-  host: {
-    class: 'et-inline-tab-content',
-  },
-})
-export class InlineTabContentDirective {
-  template = inject(TemplateRef);
-}

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

@@ -1,11 +0,0 @@
-<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/partials/inline-tabs/inline-tab-header/inline-tab-header.component.ts

@@ -1,52 +0,0 @@
-import { NgClass } from '@angular/common';
-import {
-  AfterContentChecked,
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  forwardRef,
-  OnDestroy,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { ObserveContentDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
-import { ScrollableComponent } from '../../../../scrollable/components/scrollable';
-import { ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, PaginatedTabHeaderDirective } from '../../../utils';
-import { InlineTabLabelWrapperDirective } from '../inline-tab-label-wrapper';
-
-@Component({
-  selector: 'et-inline-tab-header',
-  templateUrl: 'inline-tab-header.component.html',
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [ScrollableComponent, NgClass, ObserveContentDirective, ScrollObserverIgnoreTargetDirective],
-  host: {
-    class: 'et-inline-tab-header',
-  },
-})
-export class InlineTabHeaderComponent
-  extends PaginatedTabHeaderDirective
-  implements AfterContentChecked, AfterContentInit, OnDestroy
-{
-  @ContentChildren(InlineTabLabelWrapperDirective, { descendants: false })
-  _items!: TypedQueryList<InlineTabLabelWrapperDirective>;
-
-  @ViewChild(ScrollableComponent, { static: true })
-  _scrollable!: ScrollableComponent;
-
-  @ContentChildren(forwardRef(() => ActiveTabUnderlineDirective), { descendants: true })
-  _inkBars!: TypedQueryList<ActiveTabUnderlineDirective>;
-
-  _activeTabUnderlineManager?: ActiveTabUnderlineBarManager;
-
-  override ngAfterContentInit() {
-    this._activeTabUnderlineManager = new ActiveTabUnderlineBarManager(this._inkBars);
-    super.ngAfterContentInit();
-  }
-
-  protected _itemSelected(event: KeyboardEvent) {
-    event.preventDefault();
-  }
-}

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

@@ -1,24 +0,0 @@
-import { CdkPortal } from '@angular/cdk/portal';
-import { Directive, Inject, InjectionToken, Optional, TemplateRef, ViewContainerRef } from '@angular/core';
-
-export const TAB_LABEL = new InjectionToken<InlineTabLabelDirective>('TabLabel');
-
-export const TAB = new InjectionToken<unknown>('TAB');
-
-@Directive({
-  selector: '[et-inline-tab-label]',
-  providers: [{ provide: TAB_LABEL, useExisting: InlineTabLabelDirective }],
-  standalone: true,
-  host: {
-    class: 'et-inline-tab-label',
-  },
-})
-export class InlineTabLabelDirective extends CdkPortal {
-  constructor(
-    templateRef: TemplateRef<unknown>,
-    viewContainerRef: ViewContainerRef,
-    @Inject(TAB) @Optional() public _closestTab: unknown,
-  ) {
-    super(templateRef, viewContainerRef);
-  }
-}

package/src/lib/components/tabs/partials/inline-tabs/inline-tab-label-wrapper/inline-tab-label-wrapper.directive.ts

@@ -1,34 +0,0 @@
-import { Directive, ElementRef, HostBinding, Input, booleanAttribute, inject } from '@angular/core';
-import { ActiveTabUnderlineDirective } from '../../../utils';
-
-@Directive({
-  selector: '[etInlineTabLabelWrapper]',
-  standalone: true,
-  host: {
-    class: 'et-inline-tab-label-wrapper',
-  },
-  hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ['fitUnderlineToContent'] }],
-})
-export class InlineTabLabelWrapperDirective {
-  public elementRef = inject(ElementRef);
-
-  @Input({ transform: booleanAttribute })
-  disabled = false;
-
-  @HostBinding('attr.aria-disabled')
-  get attrAriaDisabled() {
-    return this.disabled ? 'true' : null;
-  }
-
-  focus(): void {
-    this.elementRef.nativeElement.focus();
-  }
-
-  getOffsetLeft(): number {
-    return this.elementRef.nativeElement.offsetLeft;
-  }
-
-  getOffsetWidth(): number {
-    return this.elementRef.nativeElement.offsetWidth;
-  }
-}

package/src/lib/components/tabs/partials/nav-tabs/nav-tab-link/nav-tab-link.directive.ts

@@ -1,190 +0,0 @@
-import { FocusableOption, FocusMonitor } from '@angular/cdk/a11y';
-import { SPACE } from '@angular/cdk/keycodes';
-import {
-  AfterViewInit,
-  Attribute,
-  booleanAttribute,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  inject,
-  Input,
-  NgZone,
-  numberAttribute,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-import { IsActiveMatchOptions, Router, RouterLink, RouterLinkActive } from '@angular/router';
-import { NavTabsComponent } from '../../../components/nav-tabs/nav-tabs.component';
-import { ActiveTabUnderlineDirective } from '../../../utils';
-
-let nextUniqueId = 0;
-
-@Component({
-  selector: '[et-nav-tab-link]',
-  template: `
-    <span class="et-tab-content">
-      <ng-content />
-    </span>
-  `,
-  standalone: true,
-  host: {
-    class: 'et-nav-tab-link',
-  },
-  hostDirectives: [{ directive: ActiveTabUnderlineDirective, inputs: ['fitUnderlineToContent'] }],
-})
-export class NavTabLinkComponent implements OnInit, AfterViewInit, OnDestroy, FocusableOption {
-  private _tabNavBar = inject(NavTabsComponent);
-  public elementRef = inject(ElementRef);
-  private _focusMonitor = inject(FocusMonitor);
-  private _router = inject(Router);
-  private _cdr = inject(ChangeDetectorRef);
-  private _ngZone = inject(NgZone);
-  public _link = inject(RouterLink, { optional: true });
-  public _linkWithHref = inject(RouterLink, { optional: true });
-  public _linkConfig = inject(RouterLinkActive, { optional: true });
-
-  get active(): boolean {
-    const link = this._link || this._linkWithHref;
-
-    if (!link) {
-      return false;
-    }
-
-    const options: boolean | IsActiveMatchOptions = this._linkConfig
-      ? isActiveMatchOptions(this._linkConfig?.routerLinkActiveOptions)
-        ? this._linkConfig?.routerLinkActiveOptions
-        : this._linkConfig?.routerLinkActiveOptions.exact
-      : false;
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    // Stolen from https://github.com/angular/angular/blob/main/packages/router/src/directives/router_link_active.ts#L217
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const isActive = link.urlTree ? this._router.isActive(link.urlTree, options as any) : false;
-
-    return isActive;
-  }
-
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input({ transform: (v: unknown) => numberAttribute(v, 0) })
-  tabIndex = 0;
-
-  @Input({ transform: booleanAttribute })
-  disabled = false;
-
-  @Input()
-  @HostBinding('attr.id')
-  id = `et-nav-tab-link-${nextUniqueId++}`;
-
-  @HostBinding('attr.aria-controls')
-  get _attrAriaControls() {
-    return this._getAriaControls();
-  }
-
-  @HostBinding('attr.aria-current')
-  get _attrAriaCurrent() {
-    return this._getAriaCurrent();
-  }
-
-  @HostBinding('attr.aria-disabled')
-  get _attrAriaDisabled() {
-    return this.disabled;
-  }
-
-  @HostBinding('attr.aria-selected')
-  get _attrAriaSelected() {
-    return this._getAriaSelected();
-  }
-
-  @HostBinding('attr.tabIndex')
-  get _attrTabIndex() {
-    return this._getTabIndex();
-  }
-
-  @HostBinding('attr.role')
-  get _attrRole() {
-    return this._getRole();
-  }
-
-  constructor(@Attribute('tabindex') tabIndex: string) {
-    this.tabIndex = parseInt(tabIndex) || 0;
-  }
-
-  ngOnInit(): void {
-    this._ngZone.runOutsideAngular(() => {
-      this.elementRef.nativeElement.addEventListener('click', this._haltDisabledEvents);
-    });
-  }
-
-  ngAfterViewInit() {
-    this._focusMonitor.monitor(this.elementRef);
-  }
-
-  ngOnDestroy() {
-    this._focusMonitor.stopMonitoring(this.elementRef);
-    this.elementRef.nativeElement.removeEventListener('click', this._haltDisabledEvents);
-  }
-
-  focus() {
-    this.elementRef.nativeElement.focus();
-  }
-
-  @HostListener('focus')
-  _handleFocus() {
-    this._tabNavBar.focusIndex = this._tabNavBar._items.toArray().indexOf(this);
-  }
-
-  @HostListener('keydown', ['$event'])
-  _handleKeydown(event: KeyboardEvent) {
-    if (this._tabNavBar.tabOutlet && event.keyCode === SPACE) {
-      this.elementRef.nativeElement.click();
-    }
-  }
-
-  _getAriaControls(): string | null {
-    return this._tabNavBar.tabOutlet
-      ? this._tabNavBar.tabOutlet?.id
-      : this.elementRef.nativeElement.getAttribute('aria-controls');
-  }
-
-  _getAriaSelected(): string | null {
-    if (this._tabNavBar.tabOutlet) {
-      return this.active ? 'true' : 'false';
-    } else {
-      return this.elementRef.nativeElement.getAttribute('aria-selected');
-    }
-  }
-
-  _getAriaCurrent(): string | null {
-    return this.active && !this._tabNavBar.tabOutlet ? 'page' : null;
-  }
-
-  _getRole(): string | null {
-    return this._tabNavBar.tabOutlet ? 'tab' : this.elementRef.nativeElement.getAttribute('role');
-  }
-
-  _getTabIndex(): number {
-    if (this._tabNavBar.tabOutlet) {
-      return this.active && !this.disabled ? 0 : -1;
-    } else {
-      return this.tabIndex;
-    }
-  }
-
-  _markForCheck() {
-    this._cdr.markForCheck();
-  }
-
-  private _haltDisabledEvents = (event: Event) => {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  };
-}
-
-function isActiveMatchOptions(options: { exact: boolean } | IsActiveMatchOptions): options is IsActiveMatchOptions {
-  return !!(options as IsActiveMatchOptions).paths;
-}

package/src/lib/components/tabs/partials/nav-tabs/nav-tabs-outlet/nav-tabs-outlet.component.scss

@@ -1,29 +0,0 @@
-.et-nav-tabs {
-  display: block;
-
-  .et-nav-tab-link {
-    white-space: nowrap;
-  }
-
-  .et-nav-tab-link:not([aria-disabled='true']) {
-    cursor: pointer;
-  }
-
-  .et-scrollable-container {
-    position: relative;
-  }
-}
-
-.et-nav-tabs-outlet {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-
-  router-outlet {
-    display: none;
-
-    & + * {
-      display: block;
-    }
-  }
-}

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

@@ -1,36 +0,0 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
-
-let nextUniqueId = 0;
-
-@Component({
-  selector: 'et-nav-tabs-outlet',
-  template: '<ng-content />',
-  styleUrls: ['nav-tabs-outlet.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  host: {
-    class: 'et-nav-tabs-outlet',
-  },
-})
-export class NavTabsOutletComponent {
-  @Input()
-  id = `et-nav-tabs-outlet-${nextUniqueId++}`;
-
-  @HostBinding('attr.aria-labelledby')
-  get _attrAriaLabelledBy() {
-    return this._activeTabId;
-  }
-
-  @HostBinding('attr.role')
-  get _attrRole() {
-    return 'tabpanel';
-  }
-
-  @HostBinding('attr.id')
-  get _attrId() {
-    return this.id;
-  }
-
-  _activeTabId?: string;
-}

package/src/lib/components/tabs/tab.imports.ts

@@ -1,25 +0,0 @@
-import { InlineTabsComponent } from './components/inline-tabs';
-import { NavTabsComponent } from './components/nav-tabs';
-import { InlineTabComponent } from './partials/inline-tabs/inline-tab';
-import { InlineTabBodyComponent } from './partials/inline-tabs/inline-tab-body';
-import { InlineTabBodyHostDirective } from './partials/inline-tabs/inline-tab-body-host';
-import { InlineTabContentDirective } from './partials/inline-tabs/inline-tab-content';
-import { InlineTabHeaderComponent } from './partials/inline-tabs/inline-tab-header';
-import { InlineTabLabelDirective } from './partials/inline-tabs/inline-tab-label';
-import { InlineTabLabelWrapperDirective } from './partials/inline-tabs/inline-tab-label-wrapper';
-import { NavTabLinkComponent } from './partials/nav-tabs/nav-tab-link';
-import { NavTabsOutletComponent } from './partials/nav-tabs/nav-tabs-outlet';
-
-export const TabImports = [
-  InlineTabsComponent,
-  InlineTabBodyComponent,
-  InlineTabBodyHostDirective,
-  InlineTabComponent,
-  InlineTabContentDirective,
-  InlineTabHeaderComponent,
-  InlineTabLabelDirective,
-  InlineTabLabelWrapperDirective,
-  NavTabsOutletComponent,
-  NavTabLinkComponent,
-  NavTabsComponent,
-] as const;

package/src/lib/components/tabs/types/tab-config.types.ts

@@ -1,10 +0,0 @@
-import { InjectionToken } from '@angular/core';
-
-export interface TabConfig {
-  disablePagination?: boolean;
-  fitInkBarToContent?: boolean;
-  contentTabIndex?: number;
-  preserveContent?: boolean;
-}
-
-export const TABS_CONFIG = new InjectionToken<TabConfig>('TABS_CONFIG');