@ethlete/cdk 4.28.0 → 4.28.1

package/src/lib/components/tabs/utils/active-tab-underline.util.ts

@@ -1,155 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  InjectionToken,
-  Input,
-  OnDestroy,
-  OnInit,
-  booleanAttribute,
-  inject,
-} from '@angular/core';
-import { TypedQueryList } from '@ethlete/core';
-
-export interface ActiveTabUnderlineItem extends OnInit, OnDestroy {
-  elementRef: ElementRef<HTMLElement>;
-  activateUnderline(previousIndicatorClientRect?: DOMRect): void;
-  deactivateUnderline(): void;
-  fitUnderlineToContent: boolean;
-}
-
-const ACTIVE_CLASS = 'et-active-tab-underline--active';
-
-const NO_TRANSITION_CLASS = 'et-active-tab-underline--no-transition';
-
-export class ActiveTabUnderlineBarManager {
-  private _currentItem: ActiveTabUnderlineItem | undefined;
-
-  constructor(private _items: TypedQueryList<ActiveTabUnderlineItem>) {}
-
-  hide() {
-    this._items.forEach((item) => item?.deactivateUnderline());
-  }
-
-  alignToElement(element: HTMLElement) {
-    const correspondingItem = this._items.find((item) => item?.elementRef.nativeElement === element);
-    const currentItem = this._currentItem;
-
-    currentItem?.deactivateUnderline();
-
-    if (correspondingItem) {
-      const clientRect = currentItem?.elementRef.nativeElement.getBoundingClientRect?.();
-
-      correspondingItem.activateUnderline(clientRect);
-      this._currentItem = correspondingItem;
-    }
-  }
-}
-
-@Directive({ standalone: true })
-export class ActiveTabUnderlineDirective implements OnInit, OnDestroy {
-  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  private _underlineElement: HTMLElement | null = null;
-  private _underlineContentElement: HTMLElement | null = null;
-
-  @Input()
-  get fitUnderlineToContent(): boolean {
-    return this._fitToContent;
-  }
-  set fitUnderlineToContent(v: unknown) {
-    const newValue = booleanAttribute(v);
-
-    if (this._fitToContent !== newValue) {
-      this._fitToContent = newValue;
-
-      if (this._underlineElement) {
-        this._appendUnderlineElement();
-      }
-    }
-  }
-  private _fitToContent = false;
-
-  activateUnderline(previousIndicatorClientRect?: DOMRect) {
-    const element = this.elementRef.nativeElement;
-
-    if (!previousIndicatorClientRect || !element.getBoundingClientRect || !this._underlineContentElement) {
-      element.classList.add(ACTIVE_CLASS);
-      return;
-    }
-
-    const currentClientRect = element.getBoundingClientRect();
-    const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
-    const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
-    element.classList.add(NO_TRANSITION_CLASS);
-    this._underlineContentElement.style.setProperty('transform', `translateX(${xPosition}px) scaleX(${widthDelta})`);
-
-    element.getBoundingClientRect();
-
-    element.classList.remove(NO_TRANSITION_CLASS);
-    element.classList.add(ACTIVE_CLASS);
-    this._underlineContentElement.style.setProperty('transform', '');
-  }
-
-  deactivateUnderline() {
-    this.elementRef.nativeElement.classList.remove(ACTIVE_CLASS);
-  }
-
-  ngOnInit() {
-    this._createUnderlineElement();
-  }
-
-  ngOnDestroy() {
-    this._underlineElement?.remove();
-    this._underlineElement = this._underlineContentElement = null;
-  }
-
-  private _createUnderlineElement() {
-    const documentNode = this.elementRef.nativeElement.ownerDocument || document;
-    this._underlineElement = documentNode.createElement('span');
-    this._underlineContentElement = documentNode.createElement('span');
-
-    this._underlineElement.className = 'et-active-tab-underline';
-    this._underlineContentElement.className =
-      'et-active-tab-underline__content et-active-tab-underline__content--underline';
-
-    this._underlineElement.appendChild(this._underlineContentElement);
-    this._appendUnderlineElement();
-  }
-
-  private _appendUnderlineElement() {
-    if (!this._underlineElement) {
-      return;
-    }
-
-    const parentElement = this._fitToContent
-      ? this.elementRef.nativeElement.querySelector('.et-tab-content')
-      : this.elementRef.nativeElement;
-
-    if (!parentElement) {
-      return;
-    }
-
-    parentElement.appendChild(this._underlineElement);
-  }
-}
-
-export interface _ActiveTabUnderlinePositioner {
-  (element: HTMLElement): { left: string; width: string };
-}
-
-export function _MAT_INK_BAR_POSITIONER_FACTORY(): _ActiveTabUnderlinePositioner {
-  const method = (element: HTMLElement) => ({
-    left: element ? (element.offsetLeft || 0) + 'px' : '0',
-    width: element ? (element.offsetWidth || 0) + 'px' : '0',
-  });
-
-  return method;
-}
-
-export const _MAT_INK_BAR_POSITIONER = new InjectionToken<_ActiveTabUnderlinePositioner>(
-  'ET_ACTIVE_TAB_UNDERLINE_POSITIONER',
-  {
-    providedIn: 'root',
-    factory: _MAT_INK_BAR_POSITIONER_FACTORY,
-  },
-);

package/src/lib/components/tabs/utils/paginated-tab-header.directive.ts

@@ -1,353 +0,0 @@
-import { FocusableOption, FocusKeyManager } from '@angular/cdk/a11y';
-import { Direction, Directionality } from '@angular/cdk/bidi';
-import { ENTER, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
-import { ViewportRuler } from '@angular/cdk/scrolling';
-import {
-  AfterContentChecked,
-  AfterContentInit,
-  booleanAttribute,
-  ChangeDetectorRef,
-  Directive,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  NgZone,
-  numberAttribute,
-  OnDestroy,
-  Output,
-  QueryList,
-} from '@angular/core';
-import { createDestroy, NgClassType, TypedQueryList } from '@ethlete/core';
-import { fromEvent, merge, of as observableOf, Subject, timer } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
-import { ScrollableComponent } from '../../scrollable/components/scrollable';
-
-export type TabPaginationScrollDirection = 'after' | 'before';
-
-const EXAGGERATED_OVERSCROLL = 60;
-const HEADER_SCROLL_DELAY = 650;
-const HEADER_SCROLL_INTERVAL = 100;
-
-export type PaginatedTabHeaderItem = FocusableOption & { elementRef: ElementRef };
-
-@Directive()
-export abstract class PaginatedTabHeaderDirective implements AfterContentChecked, AfterContentInit, OnDestroy {
-  protected _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  protected _cdr = inject(ChangeDetectorRef);
-  private _viewportRuler = inject(ViewportRuler);
-  private _dir = inject(Directionality, { optional: true });
-  private _ngZone = inject(NgZone);
-
-  abstract _items: TypedQueryList<PaginatedTabHeaderItem>;
-  abstract _scrollable: ScrollableComponent;
-
-  abstract _activeTabUnderlineManager?: { hide: () => void; alignToElement: (element: HTMLElement) => void };
-
-  private _scrollDistance = 0;
-
-  private _selectedIndexChanged = false;
-
-  protected readonly _destroy$ = createDestroy();
-
-  _tabLabelCount!: number;
-
-  private _scrollDistanceChanged!: boolean;
-
-  private _keyManager!: FocusKeyManager<PaginatedTabHeaderItem>;
-
-  private _currentTextContent!: string;
-
-  private _stopScrolling = new Subject<void>();
-
-  @Input()
-  get selectedIndex(): number {
-    return this._selectedIndex;
-  }
-  set selectedIndex(val: unknown) {
-    const value = numberAttribute(val);
-
-    if (this._selectedIndex != value) {
-      this._selectedIndexChanged = true;
-      this._selectedIndex = value;
-
-      if (this._keyManager) {
-        this._keyManager.updateActiveItem(value);
-      }
-    }
-  }
-  private _selectedIndex = 0;
-
-  @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 selectFocusedIndex: EventEmitter<number> = new EventEmitter<number>();
-
-  @Output()
-  readonly indexFocused: EventEmitter<number> = new EventEmitter<number>();
-
-  constructor() {
-    this._ngZone.runOutsideAngular(() => {
-      fromEvent(this._elementRef.nativeElement, 'mouseleave')
-        .pipe(takeUntil(this._destroy$))
-        .subscribe(() => {
-          this._stopInterval();
-        });
-    });
-  }
-
-  protected abstract _itemSelected(event: KeyboardEvent): void;
-
-  ngAfterContentInit() {
-    const dirChange = this._dir ? this._dir.change : observableOf('ltr');
-    const resize = this._viewportRuler.change(150);
-    const realign = () => {
-      this.updatePagination();
-      this._alignInkBarToSelectedTab();
-    };
-
-    this._keyManager = new FocusKeyManager<PaginatedTabHeaderItem>(this._items as QueryList<PaginatedTabHeaderItem>)
-      .withHorizontalOrientation(this._getLayoutDirection())
-      .withHomeAndEnd()
-      .withWrap();
-
-    this._keyManager.updateActiveItem(this._selectedIndex);
-
-    this._ngZone.onStable.pipe(take(1)).subscribe(realign);
-
-    merge(dirChange, resize, this._items.changes)
-      .pipe(takeUntil(this._destroy$))
-      .subscribe(() => {
-        this._ngZone.run(() => {
-          Promise.resolve().then(() => {
-            this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), this._scrollDistance));
-            realign();
-          });
-        });
-        this._keyManager.withHorizontalOrientation(this._getLayoutDirection());
-      });
-
-    this._keyManager.change.pipe(takeUntil(this._destroy$)).subscribe((newFocusIndex) => {
-      this.indexFocused.emit(newFocusIndex);
-      this._setTabFocus(newFocusIndex);
-    });
-  }
-
-  ngAfterContentChecked(): void {
-    if (this._tabLabelCount !== this._items.length) {
-      this.updatePagination();
-      this._tabLabelCount = this._items.length;
-      this._cdr.markForCheck();
-    }
-
-    if (this._selectedIndexChanged) {
-      this._scrollToLabel(this._selectedIndex);
-      this._alignInkBarToSelectedTab();
-      this._selectedIndexChanged = false;
-      this._cdr.markForCheck();
-    }
-
-    if (this._scrollDistanceChanged) {
-      this._updateTabScrollPosition();
-      this._scrollDistanceChanged = false;
-      this._cdr.markForCheck();
-    }
-  }
-
-  ngOnDestroy() {
-    this._stopScrolling.complete();
-  }
-
-  _handleKeydown(event: KeyboardEvent) {
-    if (hasModifierKey(event)) {
-      return;
-    }
-
-    switch (event.keyCode) {
-      case ENTER:
-      case SPACE:
-        if (this.focusIndex !== this.selectedIndex) {
-          this.selectFocusedIndex.emit(this.focusIndex);
-          this._itemSelected(event);
-        }
-        break;
-      default:
-        this._keyManager.onKeydown(event);
-    }
-  }
-
-  _onContentChanges() {
-    const textContent = this._elementRef.nativeElement.textContent;
-
-    if (textContent !== this._currentTextContent) {
-      this._currentTextContent = textContent || '';
-
-      this._ngZone.run(() => {
-        this.updatePagination();
-        this._alignInkBarToSelectedTab();
-        this._cdr.markForCheck();
-      });
-    }
-  }
-
-  updatePagination() {
-    this._updateTabScrollPosition();
-  }
-
-  get focusIndex(): number {
-    return this._keyManager.activeItemIndex ?? 0;
-  }
-
-  set focusIndex(value: number) {
-    if (!this._isValidIndex(value) || this.focusIndex === value || !this._keyManager) {
-      return;
-    }
-
-    this._keyManager.setActiveItem(value);
-  }
-
-  _isValidIndex(index: number): boolean {
-    if (!this._items) {
-      return true;
-    }
-
-    const tab = this._items ? this._items.toArray()[index] : null;
-    return !!tab && !tab.disabled;
-  }
-
-  _setTabFocus(tabIndex: number) {
-    this._scrollToLabel(tabIndex);
-
-    if (this._items && this._items.length) {
-      this._items.toArray()[tabIndex]?.focus();
-    }
-  }
-
-  _getLayoutDirection(): Direction {
-    return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';
-  }
-
-  _updateTabScrollPosition() {
-    this._scrollable?.scrollable()?.nativeElement.scrollTo({ left: this.scrollDistance, behavior: 'smooth' });
-  }
-
-  get scrollDistance(): number {
-    return this._scrollDistance;
-  }
-  set scrollDistance(value: number) {
-    this._scrollTo(value);
-  }
-
-  _scrollHeader(direction: TabPaginationScrollDirection) {
-    const viewLength = this._scrollable?.scrollable()?.nativeElement.offsetWidth;
-
-    if (!viewLength) return;
-
-    const scrollAmount = ((direction == 'before' ? -1 : 1) * viewLength) / 3;
-
-    return this._scrollTo(this._scrollDistance + scrollAmount);
-  }
-
-  _handlePaginatorClick(direction: TabPaginationScrollDirection) {
-    this._stopInterval();
-    this._scrollHeader(direction);
-  }
-
-  _scrollToLabel(labelIndex: number) {
-    const selectedLabel = this._items ? this._items.toArray()[labelIndex] : null;
-    const scrollable = this._scrollable.scrollable()?.nativeElement;
-
-    if (!selectedLabel || !scrollable) {
-      return;
-    }
-
-    const viewLength = scrollable.offsetWidth;
-    const { offsetLeft, offsetWidth } = selectedLabel.elementRef.nativeElement;
-
-    let labelBeforePos: number, labelAfterPos: number;
-    if (this._getLayoutDirection() == 'ltr') {
-      labelBeforePos = offsetLeft;
-      labelAfterPos = labelBeforePos + offsetWidth;
-    } else {
-      labelAfterPos = scrollable.offsetWidth - offsetLeft;
-      labelBeforePos = labelAfterPos - offsetWidth;
-    }
-
-    const beforeVisiblePos = this.scrollDistance;
-    const afterVisiblePos = this.scrollDistance + viewLength;
-
-    if (labelBeforePos < beforeVisiblePos) {
-      this.scrollDistance -= beforeVisiblePos - labelBeforePos + EXAGGERATED_OVERSCROLL;
-    } else if (labelAfterPos > afterVisiblePos) {
-      this.scrollDistance += labelAfterPos - afterVisiblePos + EXAGGERATED_OVERSCROLL;
-    }
-  }
-
-  _getMaxScrollDistance(): number {
-    const lengthOfTabList = this._scrollable.scrollable()?.nativeElement.scrollWidth;
-    const viewLength = this._scrollable.scrollable()?.nativeElement.offsetWidth;
-
-    if (!lengthOfTabList || !viewLength) return 0;
-
-    return lengthOfTabList - viewLength || 0;
-  }
-
-  _alignInkBarToSelectedTab(): void {
-    const selectedItem = this._items && this._items.length ? this._items.toArray()[this.selectedIndex] : null;
-    const selectedLabelWrapper = selectedItem ? selectedItem.elementRef.nativeElement : null;
-
-    if (selectedLabelWrapper) {
-      this._activeTabUnderlineManager?.alignToElement(selectedLabelWrapper);
-    } else {
-      this._activeTabUnderlineManager?.hide();
-    }
-  }
-
-  _stopInterval() {
-    this._stopScrolling.next();
-  }
-
-  _handlePaginatorPress(direction: TabPaginationScrollDirection, mouseEvent?: MouseEvent) {
-    if (mouseEvent && mouseEvent.button != null && mouseEvent.button !== 0) {
-      return;
-    }
-
-    this._stopInterval();
-
-    timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL)
-      .pipe(takeUntil(merge(this._stopScrolling, this._destroy$)))
-      .subscribe(() => {
-        const data = this._scrollHeader(direction);
-
-        if (!data) {
-          return;
-        }
-
-        if (data.distance === 0 || data.distance >= data.maxScrollDistance) {
-          this._stopInterval();
-        }
-      });
-  }
-
-  private _scrollTo(position: number) {
-    const maxScrollDistance = this._getMaxScrollDistance();
-    this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position));
-
-    this._scrollDistanceChanged = true;
-
-    return { maxScrollDistance, distance: this._scrollDistance };
-  }
-}

package/src/lib/services/swipe-handler.service.ts

@@ -1,123 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwipeEndEvent, SwipeUpdateEvent } from '../types';
-
-let nextUniqueId = 0;
-
-const isTouchEvent = (event: Event): event is TouchEvent => {
-  return event.type[0] === 't';
-};
-
-@Injectable({
-  providedIn: 'root',
-})
-export class SwipeHandlerService {
-  private _handlerMap: Record<number, SwipeUpdateEvent> = {};
-
-  startSwipe(event: TouchEvent | MouseEvent) {
-    const handlerId = nextUniqueId++;
-
-    const originClientX = isTouchEvent(event) ? event.targetTouches[0]!.clientX : event.clientX;
-    const originClientY = isTouchEvent(event) ? event.targetTouches[0]!.clientY : event.clientY;
-    const timestamp = Date.now();
-
-    this._handlerMap[handlerId] = {
-      originClientX,
-      originClientY,
-      timestamp,
-      movementX: 0,
-      movementY: 0,
-      positiveMovementX: 0,
-      positiveMovementY: 0,
-      isScrolling: false,
-      isSwiping: false,
-    };
-
-    return handlerId;
-  }
-
-  updateSwipe(handlerId: number, event: TouchEvent | MouseEvent) {
-    const handler = this._getSwipeHandler(handlerId);
-
-    if (!handler) return null;
-
-    const { originClientX, originClientY, isSwiping, isScrolling } = handler;
-
-    const currentClientX = isTouchEvent(event) ? event.targetTouches[0]!.clientX : event.clientX;
-    const currentClientY = isTouchEvent(event) ? event.targetTouches[0]!.clientY : event.clientY;
-
-    const movementX = (originClientX - currentClientX) * -1;
-    const movementY = (originClientY - currentClientY) * -1;
-
-    const positiveMovementX = Math.abs(movementX);
-    const positiveMovementY = Math.abs(movementY);
-
-    if (!isSwiping && !isScrolling) {
-      if (positiveMovementY > positiveMovementX) {
-        handler.isScrolling = true;
-      } else {
-        handler.isSwiping = true;
-      }
-    }
-
-    handler.movementX = movementX;
-    handler.movementY = movementY;
-
-    handler.positiveMovementX = positiveMovementX;
-    handler.positiveMovementY = positiveMovementY;
-
-    return handler;
-  }
-
-  endSwipe(handlerId: number) {
-    const handler = this._getSwipeHandler(handlerId);
-
-    if (!handler) return null;
-
-    const { movementX, movementY, timestamp, originClientX, originClientY, positiveMovementX, positiveMovementY } =
-      handler;
-
-    const timestampStart = timestamp;
-    const timestampEnd = Date.now();
-
-    const swipeTime = timestampEnd - timestampStart;
-
-    const pixelPerMillisecondX = movementX ? movementX / swipeTime : 0;
-    const pixelPerSecondX = pixelPerMillisecondX * 1000;
-    const positivePixelPerSecondX = Math.abs(pixelPerSecondX);
-
-    const pixelPerMillisecondY = movementY ? movementY / swipeTime : 0;
-    const pixelPerSecondY = pixelPerMillisecondY * 1000;
-    const positivePixelPerSecondY = Math.abs(pixelPerSecondY);
-
-    delete this._handlerMap[handlerId];
-
-    const swipeEnd: SwipeEndEvent = {
-      positivePixelPerSecondX,
-      positivePixelPerSecondY,
-      pixelPerSecondX,
-      pixelPerSecondY,
-      movementX,
-      movementY,
-      originClientX,
-      originClientY,
-      positiveMovementX,
-      positiveMovementY,
-    };
-
-    return swipeEnd;
-  }
-
-  cancelSwipe(handlerId: number) {
-    delete this._handlerMap[handlerId];
-  }
-
-  private _getSwipeHandler(handlerId: number) {
-    const handler = this._handlerMap[handlerId];
-
-    if (!handler) {
-      return null;
-    }
-
-    return handler;
-  }
-}

package/src/lib/stories/changelog-page.mdx

@@ -1,9 +0,0 @@
-import { Meta, Markdown } from '@storybook/blocks';
-
-import Readme from '../../../CHANGELOG.md?raw';
-
-<Meta title="Changelog/CDK" />
-
-# Changelog
-
-<Markdown>{Readme}</Markdown>

package/src/lib/types/swipe.types.ts

@@ -1,24 +0,0 @@
-export interface SwipeEndEvent {
-  positivePixelPerSecondX: number;
-  positivePixelPerSecondY: number;
-  pixelPerSecondX: number;
-  pixelPerSecondY: number;
-  movementX: number;
-  movementY: number;
-  positiveMovementX: number;
-  positiveMovementY: number;
-  originClientX: number;
-  originClientY: number;
-}
-
-export interface SwipeUpdateEvent {
-  originClientX: number;
-  originClientY: number;
-  timestamp: number;
-  movementX: number;
-  movementY: number;
-  positiveMovementX: number;
-  positiveMovementY: number;
-  isScrolling: boolean;
-  isSwiping: boolean;
-}

package/src/lib/utils/floating-ui.utils.ts

@@ -1,16 +0,0 @@
-import { Placement } from '@floating-ui/dom';
-
-export const FLOATING_UI_PLACEMENTS: Placement[] = [
-  'top',
-  'left',
-  'bottom',
-  'right',
-  'top-start',
-  'top-end',
-  'right-start',
-  'right-end',
-  'bottom-start',
-  'bottom-end',
-  'left-start',
-  'left-end',
-];

package/src/test-setup.ts

@@ -1 +0,0 @@
-import 'jest-preset-angular/setup-jest';