@ethlete/cdk 4.28.0 → 4.28.1

package/src/lib/components/overlay/components/bottom-sheet/constants/bottom-sheet.constants.ts

@@ -1,68 +0,0 @@
-import { ScrollStrategy, ViewportRuler } from '@angular/cdk/overlay';
-import { InjectionToken } from '@angular/core';
-import { RouterStateService, SmartBlockScrollStrategy } from '@ethlete/core';
-import { BottomSheetConfig } from '../types';
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH = 150;
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE = 150;
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_DATA = new InjectionToken<unknown>('BottomSheetData');
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_DEFAULT_OPTIONS = new InjectionToken<BottomSheetConfig>('BottomSheetDefaultOptions');
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_CONFIG = new InjectionToken<BottomSheetConfig>('BottomSheetConfig');
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>('BottomSheetScrollStrategy');
-
-/**
- * @deprecated Will be removed in v5.
- */
-export function BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY(
-  ruler: ViewportRuler,
-  routerState: RouterStateService,
-): () => ScrollStrategy {
-  return () => new SmartBlockScrollStrategy(ruler, routerState, document);
-}
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER = {
-  provide: BOTTOM_SHEET_SCROLL_STRATEGY,
-  deps: [ViewportRuler, RouterStateService],
-  useFactory: BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY,
-};
-
-/**
- * @deprecated Will be removed in v5.
- */
-export const BOTTOM_SHEET_DEFAULT_CONFIG: BottomSheetConfig = {
-  data: null,
-  hasBackdrop: true,
-  delayFocusTrap: true,
-  disableClose: false,
-  ariaLabel: null,
-  ariaModal: true,
-  closeOnNavigation: true,
-  autoFocus: 'dialog',
-  customAnimated: false,
-  restoreFocus: true,
-} as const;

package/src/lib/components/overlay/components/bottom-sheet/partials/bottom-sheet-container-base/bottom-sheet-container-base.component.ts

@@ -1,51 +0,0 @@
-import { FocusMonitor, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
-import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { OverlayRef } from '@angular/cdk/overlay';
-import { DOCUMENT } from '@angular/common';
-import { Component, ElementRef, Inject, NgZone, Optional, inject } from '@angular/core';
-import { ANIMATED_LIFECYCLE_TOKEN } from '@ethlete/core';
-import { BOTTOM_SHEET_CONFIG } from '../../constants';
-import { BottomSheetConfig } from '../../types';
-
-/**
- * @deprecated Will be removed in v5.
- */
-@Component({ selector: 'et-bottom-sheet-container-base', template: '' })
-export abstract class BottomSheetContainerBaseComponent extends CdkDialogContainer<BottomSheetConfig> {
-  readonly _animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
-
-  constructor(
-    public elementRef: ElementRef<HTMLElement>,
-    focusTrapFactory: FocusTrapFactory,
-    @Optional() @Inject(DOCUMENT) _document: Document,
-    @Inject(BOTTOM_SHEET_CONFIG)
-    bottomSheetConfig: BottomSheetConfig,
-    interactivityChecker: InteractivityChecker,
-    ngZone: NgZone,
-    public overlayRef: OverlayRef,
-    focusMonitor?: FocusMonitor,
-  ) {
-    super(
-      elementRef,
-      focusTrapFactory,
-      _document,
-      bottomSheetConfig,
-      interactivityChecker,
-      ngZone,
-      overlayRef,
-      focusMonitor,
-    );
-  }
-
-  protected override _captureInitialFocus(): void {
-    if (!this._config.delayFocusTrap) {
-      this._trapFocus();
-    }
-  }
-
-  protected _openAnimationDone() {
-    if (this._config.delayFocusTrap) {
-      this._trapFocus();
-    }
-  }
-}

package/src/lib/components/overlay/components/bottom-sheet/partials/bottom-sheet-drag-handle/bottom-sheet-drag-handle.component.scss

@@ -1,60 +0,0 @@
-:where(.et-bottom-sheet-drag-handle) {
-  --background-color: red;
-}
-
-.et-bottom-sheet-drag-handle {
-  --_tap-target-width: 100px;
-  --_tap-target-height: 25px;
-
-  inset-inline-start: calc(50% - calc(var(--_tap-target-width) / 2));
-  inline-size: var(--_tap-target-width);
-  block-size: var(--_tap-target-height);
-  border: none;
-  position: relative;
-  background-color: rgba(0, 0, 0, 0);
-  touch-action: manipulation;
-  appearance: none;
-
-  &::before {
-    --_toggle-width: 32px;
-    --_toggle-height: 4px;
-
-    inline-size: var(--_toggle-width);
-    block-size: var(--_toggle-height);
-    content: '';
-    position: absolute;
-    background-color: var(--background-color);
-    border-radius: 9999px;
-    inset-inline-start: calc(50% - calc(var(--_toggle-width) / 2));
-    inset-block-start: calc(50% - calc(var(--_toggle-height) / 2));
-    z-index: 1;
-  }
-
-  &::after {
-    opacity: 0;
-    inline-size: 100%;
-    block-size: 100%;
-    content: '';
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    transform: scale(0);
-    transition:
-      opacity 300ms var(--ease-5),
-      transform 300ms var(--ease-5);
-  }
-
-  &:focus-visible {
-    outline: none;
-
-    &::after {
-      opacity: 1;
-      transform: scale(1);
-      transition:
-        opacity 300ms var(--ease-5),
-        transform 300ms var(--ease-squish-3);
-    }
-  }
-}

package/src/lib/components/overlay/components/bottom-sheet/partials/bottom-sheet-drag-handle/bottom-sheet-drag-handle.component.ts

@@ -1,164 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  inject,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-  ViewEncapsulation,
-} from '@angular/core';
-import { createDestroy } from '@ethlete/core';
-import { fromEvent, takeUntil, tap } from 'rxjs';
-import { BottomSheetService, BottomSheetSwipeHandlerService } from '../../services';
-import { BottomSheetRef, getClosestBottomSheet } from '../../utils';
-
-/**
- * @deprecated Will be removed in v5.
- */
-@Component({
-  selector: '[et-bottom-sheet-drag-handle], [etBottomSheetDragHandle]',
-  template: '',
-  styleUrls: ['./bottom-sheet-drag-handle.component.scss'],
-  exportAs: 'etBottomSheetDragHandle',
-  host: {
-    class: 'et-bottom-sheet-drag-handle',
-    '[attr.aria-label]': 'ariaLabel || null',
-  },
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [BottomSheetSwipeHandlerService],
-})
-export class BottomSheetDragHandleComponent implements OnInit, OnChanges {
-  private _bottomSheetRef = inject(BottomSheetRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _bottomSheetService = inject(BottomSheetService);
-  private readonly _bottomSheetSwipeHandlerService = inject(BottomSheetSwipeHandlerService);
-  private readonly _destroy$ = createDestroy();
-
-  @Input('aria-label')
-  ariaLabel?: string = 'Close sheet';
-
-  @Input()
-  @HostBinding('attr.type')
-  type: 'submit' | 'button' | 'reset' = 'button';
-
-  @Input('et-bottom-sheet-drag-handle')
-  bottomSheetResult: unknown;
-
-  @Input('etBottomSheetDragHandle')
-  _etBottomSheetDragHandle: unknown;
-
-  private _swipeHandlerId: number | null = null;
-
-  ngOnInit() {
-    if (!this._bottomSheetRef) {
-      const closestRef = getClosestBottomSheet(this._elementRef, this._bottomSheetService.openBottomSheets);
-
-      if (!closestRef) {
-        throw Error('No closest ref found');
-      }
-
-      this._bottomSheetRef = closestRef;
-    }
-
-    fromEvent<TouchEvent>(this._elementRef.nativeElement, 'touchstart', { passive: true })
-      .pipe(
-        tap((event) => this._onTouchStart(event)),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-
-    fromEvent<TouchEvent>(this._elementRef.nativeElement, 'touchmove', { passive: true })
-      .pipe(
-        tap((event) => this._onTouchMove(event)),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-
-    fromEvent<TouchEvent>(this._elementRef.nativeElement, 'touchend', { passive: true })
-      .pipe(
-        tap((event) => this._onTouchEnd(event)),
-        takeUntil(this._destroy$),
-      )
-      .subscribe();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const change = changes['_etBottomSheetDragHandle'];
-
-    if (change) {
-      this.bottomSheetResult = change.currentValue;
-    }
-  }
-
-  @HostListener('click', ['$event'])
-  _onButtonClick(event: MouseEvent) {
-    if (!this._bottomSheetRef) {
-      return;
-    }
-
-    this._bottomSheetRef._closeBottomSheetVia(
-      this._bottomSheetRef,
-      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',
-      this.bottomSheetResult,
-    );
-  }
-
-  _onTouchStart(event: TouchEvent) {
-    if (!this._bottomSheetRef) {
-      return;
-    }
-
-    if (event.cancelable) {
-      event.preventDefault();
-    }
-    event.stopPropagation();
-
-    this._swipeHandlerId = this._bottomSheetSwipeHandlerService.startSwipe(
-      event,
-      this._bottomSheetRef._containerInstance.elementRef.nativeElement,
-    );
-  }
-
-  _onTouchMove(event: TouchEvent) {
-    if (this._swipeHandlerId === null) {
-      return;
-    }
-
-    if (event.cancelable) {
-      event.preventDefault();
-    }
-    event.stopPropagation();
-
-    const didSwipe = this._bottomSheetSwipeHandlerService.updateSwipe(this._swipeHandlerId, event);
-
-    if (!didSwipe) {
-      this._swipeHandlerId = null;
-    }
-  }
-
-  _onTouchEnd(event: TouchEvent) {
-    if (this._swipeHandlerId === null) {
-      return;
-    }
-
-    event.stopPropagation();
-
-    const shouldClose = this._bottomSheetSwipeHandlerService.endSwipe(this._swipeHandlerId);
-
-    this._swipeHandlerId = null;
-
-    if (shouldClose) {
-      if (!this._bottomSheetRef) {
-        return;
-      }
-
-      this._bottomSheetRef._closeBottomSheetVia(this._bottomSheetRef, 'touch', this.bottomSheetResult);
-    }
-  }
-}

package/src/lib/components/overlay/components/bottom-sheet/partials/bottom-sheet-title/bottom-sheet-title.directive.ts

@@ -1,37 +0,0 @@
-import { Directive, ElementRef, HostBinding, inject, Input, OnInit } from '@angular/core';
-import { BottomSheetService } from '../../services';
-import { BottomSheetRef, getClosestBottomSheet } from '../../utils';
-
-let bottomSheetElementUid = 0;
-
-/**
- * @deprecated Will be removed in v5.
- */
-@Directive({
-  selector: '[et-bottom-sheet-title], [etBottomSheetTitle]',
-  exportAs: 'etBottomSheetTitle',
-  standalone: true,
-})
-export class BottomSheetTitleDirective implements OnInit {
-  private _bottomSheetRef = inject(BottomSheetRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _bottomSheetService = inject(BottomSheetService);
-
-  @Input()
-  @HostBinding('attr.id')
-  id = `et-bottom-sheet-title-${bottomSheetElementUid++}`;
-
-  ngOnInit() {
-    if (!this._bottomSheetRef) {
-      const closestRef = getClosestBottomSheet(this._elementRef, this._bottomSheetService.openBottomSheets);
-
-      if (!closestRef) {
-        throw Error('No closest ref found');
-      }
-
-      this._bottomSheetRef = closestRef;
-    }
-
-    Promise.resolve().then(() => this._bottomSheetRef?._containerInstance?._ariaLabelledByQueue?.push(this.id));
-  }
-}

package/src/lib/components/overlay/components/bottom-sheet/services/bottom-sheet-base.service.ts

@@ -1,155 +0,0 @@
-import { Dialog as CdkDialog, DialogConfig as CdkDialogConfig } from '@angular/cdk/dialog';
-import { ComponentType, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { Directive, InjectionToken, Injector, OnDestroy, TemplateRef, Type } from '@angular/core';
-import { Observable, Subject, defer, startWith } from 'rxjs';
-import { BOTTOM_SHEET_CONFIG } from '../constants';
-import { BottomSheetContainerBaseComponent } from '../partials/bottom-sheet-container-base';
-import { BottomSheetConfig } from '../types';
-import { BottomSheetRef, createBottomSheetConfig } from '../utils';
-
-let uniqueId = 0;
-
-/**
- * @deprecated Will be removed in v5.
- */
-@Directive()
-export abstract class BottomSheetServiceBase<C extends BottomSheetContainerBaseComponent> implements OnDestroy {
-  private readonly _openBottomSheetsAtThisLevel: BottomSheetRef[] = [];
-  private readonly _afterAllClosedAtThisLevel = new Subject<void>();
-  private readonly _afterOpenedAtThisLevel = new Subject<BottomSheetRef>();
-  private _scrollStrategy: () => ScrollStrategy;
-  protected _idPrefix = 'et-bottom-sheet-';
-  private _dialog: CdkDialog;
-
-  readonly afterAllClosed: Observable<void> = defer(() =>
-    this.openBottomSheets.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)),
-  ) as Observable<void>;
-
-  get openBottomSheets(): BottomSheetRef[] {
-    return this._parentBottomSheetService
-      ? this._parentBottomSheetService.openBottomSheets
-      : this._openBottomSheetsAtThisLevel;
-  }
-
-  get afterOpened(): Subject<BottomSheetRef> {
-    return this._parentBottomSheetService ? this._parentBottomSheetService.afterOpened : this._afterOpenedAtThisLevel;
-  }
-
-  private _getAfterAllClosed(): Subject<void> {
-    const parent = this._parentBottomSheetService;
-    return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
-  }
-
-  constructor(
-    private _overlay: Overlay,
-    injector: Injector,
-    private _defaultOptions: BottomSheetConfig | undefined,
-    private _parentBottomSheetService: BottomSheetServiceBase<C> | undefined,
-    scrollStrategy: () => ScrollStrategy,
-    private _bottomSheetRefConstructor: Type<BottomSheetRef>,
-    private _bottomSheetContainerType: Type<C>,
-    private _bottomSheetDataToken: InjectionToken<unknown>,
-  ) {
-    this._scrollStrategy = scrollStrategy;
-    this._dialog = injector.get(CdkDialog);
-  }
-
-  open<T, D = unknown, R = unknown>(component: ComponentType<T>, config?: BottomSheetConfig<D>): BottomSheetRef<T, R>;
-
-  open<T, D = unknown, R = unknown>(template: TemplateRef<T>, config?: BottomSheetConfig<D>): BottomSheetRef<T, R>;
-
-  open<T, D = unknown, R = unknown>(
-    template: ComponentType<T> | TemplateRef<T>,
-    config?: BottomSheetConfig<D>,
-  ): BottomSheetRef<T, R>;
-
-  open<T, D = unknown, R = unknown>(
-    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
-    config?: BottomSheetConfig<D>,
-  ): BottomSheetRef<T, R> {
-    let bottomSheetRef: BottomSheetRef<T, R>;
-    config = createBottomSheetConfig<D>(this._defaultOptions as BottomSheetConfig<D>, config);
-    config.id = config.id || `${this._idPrefix}${uniqueId++}`;
-    config.scrollStrategy = config.scrollStrategy || this._scrollStrategy();
-
-    const cdkRef = this._dialog.open<R, D, T>(componentOrTemplateRef, {
-      ...config,
-      width: '100%',
-      maxWidth: '640px',
-      maxHeight: 'calc(100% - 72px)',
-      height: '100%',
-      positionStrategy: this._overlay.position().global().centerHorizontally().bottom('0'),
-      disableClose: true,
-      closeOnDestroy: false,
-      container: {
-        type: this._bottomSheetContainerType,
-        providers: () => [
-          { provide: BOTTOM_SHEET_CONFIG, useValue: config },
-          { provide: CdkDialogConfig, useValue: config },
-        ],
-      },
-      templateContext: () => ({ dialogRef: bottomSheetRef }),
-      providers: (ref, cdkConfig, container) => {
-        if (config?.overlayClass) {
-          const overlayRefClasses = Array.isArray(config.overlayClass)
-            ? config.overlayClass.join(' ')
-            : config.overlayClass;
-
-          ref.overlayRef.hostElement.classList.add(overlayRefClasses);
-        }
-
-        bottomSheetRef = new this._bottomSheetRefConstructor(ref, config, container);
-        return [
-          { provide: this._bottomSheetContainerType, useValue: container },
-          { provide: this._bottomSheetDataToken, useValue: cdkConfig.data },
-          { provide: this._bottomSheetRefConstructor, useValue: bottomSheetRef },
-        ];
-      },
-    });
-
-    /* eslint-disable @typescript-eslint/no-non-null-assertion*/
-
-    bottomSheetRef!.componentInstance = cdkRef.componentInstance!;
-
-    this.openBottomSheets.push(bottomSheetRef!);
-    this.afterOpened.next(bottomSheetRef!);
-
-    bottomSheetRef!.afterClosed().subscribe(() => {
-      const index = this.openBottomSheets.indexOf(bottomSheetRef);
-
-      if (index > -1) {
-        this.openBottomSheets.splice(index, 1);
-
-        if (!this.openBottomSheets.length) {
-          this._getAfterAllClosed().next();
-        }
-      }
-    });
-
-    return bottomSheetRef!;
-
-    /* eslint-enable @typescript-eslint/no-non-null-assertion*/
-  }
-
-  closeAll(): void {
-    this._closeBottomSheets(this.openBottomSheets);
-  }
-
-  getBottomSheetById(id: string): BottomSheetRef | undefined {
-    return this.openBottomSheets.find((bottomSheet) => bottomSheet.id === id);
-  }
-
-  ngOnDestroy() {
-    this._closeBottomSheets(this._openBottomSheetsAtThisLevel);
-    this._afterAllClosedAtThisLevel.complete();
-    this._afterOpenedAtThisLevel.complete();
-  }
-
-  private _closeBottomSheets(bottomSheets: BottomSheetRef[]) {
-    let i = bottomSheets.length;
-
-    while (i--) {
-      bottomSheets[i]?.close();
-    }
-  }
-}

package/src/lib/components/overlay/components/bottom-sheet/services/bottom-sheet-swipe-handler.service.ts

@@ -1,70 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { SwipeHandlerService } from '../../../../../services';
-import { BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE } from '../constants';
-
-/**
- * @deprecated Will be removed in v5.
- */
-@Injectable()
-export class BottomSheetSwipeHandlerService {
-  private _swipeHandlerService = inject(SwipeHandlerService);
-  private _elementMap: Record<number, HTMLElement> = {};
-
-  startSwipe(event: TouchEvent, element: HTMLElement) {
-    const handlerId = this._swipeHandlerService.startSwipe(event);
-
-    this._elementMap[handlerId] = element;
-
-    return handlerId;
-  }
-
-  updateSwipe(handlerId: number, event: TouchEvent) {
-    const e = this._swipeHandlerService.updateSwipe(handlerId, event);
-
-    if (!e) return false;
-
-    const { movementY } = e;
-
-    const element = this._getSwipeElement(handlerId);
-
-    element.style.setProperty('--touch-translate-y', `${movementY < 0 ? 0 : movementY}px`);
-
-    return true;
-  }
-
-  endSwipe(handlerId: number) {
-    const event = this._swipeHandlerService.endSwipe(handlerId);
-
-    if (!event) return false;
-
-    const { movementY, pixelPerSecondY } = event;
-
-    const element = this._getSwipeElement(handlerId);
-
-    if (
-      movementY > BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH ||
-      (pixelPerSecondY > BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE && movementY > 0)
-    ) {
-      return true;
-    }
-
-    element.style.transition = 'transform 100ms var(--ease-out-1)';
-    element.style.removeProperty('--touch-translate-y');
-
-    setTimeout(() => {
-      element.style.transition = '';
-    }, 100);
-
-    return false;
-  }
-
-  private _getSwipeElement(handlerId: number) {
-    const handler = this._elementMap[handlerId];
-
-    if (!handler) {
-      throw new Error(`The swipe handler with id ${handlerId} was not found`);
-    }
-
-    return handler;
-  }
-}

package/src/lib/components/overlay/components/bottom-sheet/services/bottom-sheet.service.ts

@@ -1,32 +0,0 @@
-import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { Inject, Injectable, Injector, Optional, SkipSelf } from '@angular/core';
-import { BottomSheetContainerComponent } from '../components/bottom-sheet-container';
-import { BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_SCROLL_STRATEGY } from '../constants';
-import { BottomSheetConfig } from '../types';
-import { BottomSheetRef } from '../utils';
-import { BottomSheetServiceBase } from './bottom-sheet-base.service';
-
-/**
- * @deprecated Use `OverlayService` instead. Will be removed in v5.
- */
-@Injectable()
-export class BottomSheetService extends BottomSheetServiceBase<BottomSheetContainerComponent> {
-  constructor(
-    overlay: Overlay,
-    injector: Injector,
-    @Optional() @Inject(BOTTOM_SHEET_DEFAULT_OPTIONS) defaultOptions: BottomSheetConfig,
-    @Inject(BOTTOM_SHEET_SCROLL_STRATEGY) scrollStrategy: () => ScrollStrategy,
-    @Optional() @SkipSelf() parentBottomSheetService: BottomSheetService,
-  ) {
-    super(
-      overlay,
-      injector,
-      defaultOptions,
-      parentBottomSheetService,
-      scrollStrategy,
-      BottomSheetRef,
-      BottomSheetContainerComponent,
-      BOTTOM_SHEET_DATA,
-    );
-  }
-}