@ethlete/cdk 4.28.0 → 4.28.1

package/src/lib/components/overlay/components/overlay/constants/overlay.constants.ts

@@ -1,43 +0,0 @@
-import { ScrollStrategy, ViewportRuler } from '@angular/cdk/overlay';
-import { InjectionToken } from '@angular/core';
-import { RouterStateService, SmartBlockScrollStrategy } from '@ethlete/core';
-import { OverlayConfig } from '../types';
-
-export const OVERLAY_DATA = new InjectionToken('OverlayData');
-export const OVERLAY_DEFAULT_OPTIONS = new InjectionToken<OverlayConfig>('OverlayDefaultOptions');
-export const OVERLAY_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>('OverlayScrollStrategy');
-export const OVERLAY_CONFIG = new InjectionToken<OverlayConfig>('OverlayConfig');
-
-export function OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(
-  ruler: ViewportRuler,
-  routerState: RouterStateService,
-): () => ScrollStrategy {
-  return () => new SmartBlockScrollStrategy(ruler, routerState, document);
-}
-
-export const OVERLAY_SCROLL_STRATEGY_PROVIDER = {
-  provide: OVERLAY_SCROLL_STRATEGY,
-  deps: [ViewportRuler, RouterStateService],
-  useFactory: OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
-};
-
-export const OVERLAY_DEFAULT_CONFIG: OverlayConfig = {
-  role: 'dialog',
-  hasBackdrop: true,
-  disableClose: false,
-  data: null,
-  ariaDescribedBy: null,
-  ariaLabelledBy: null,
-  ariaLabel: null,
-  ariaModal: true,
-  customAnimated: false,
-  autoFocus: 'first-tabbable',
-  restoreFocus: true,
-  delayFocusTrap: true,
-  closeOnNavigation: true,
-  positions: [
-    {
-      config: {},
-    },
-  ],
-};

package/src/lib/components/overlay/components/overlay/overlay.imports.ts

@@ -1,45 +0,0 @@
-import { DIALOG_SCROLL_STRATEGY_PROVIDER as CDK_DIALOG_SCROLL_STRATEGY_PROVIDER, Dialog } from '@angular/cdk/dialog';
-import { OVERLAY_SCROLL_STRATEGY_PROVIDER } from './constants';
-import { OverlayBackOrCloseDirective } from './partials/overlay-back-or-close';
-import { OverlayBodyComponent } from './partials/overlay-body';
-import { OverlayCloseDirective } from './partials/overlay-close';
-import { OverlayFooterDirective } from './partials/overlay-footer';
-import { OverlayHeaderDirective } from './partials/overlay-header';
-import { OverlayHeaderTemplateDirective } from './partials/overlay-header-template';
-import { OverlayMainDirective } from './partials/overlay-main';
-import { OverlayRouteHeaderTemplateOutletComponent } from './partials/overlay-route-header-template-outlet';
-import { OverlayRouterLinkDirective } from './partials/overlay-router-link';
-import { OverlayRouterOutletComponent } from './partials/overlay-router-outlet';
-import { OverlayRouterOutletDisabledTemplateDirective } from './partials/overlay-router-outlet-disabled-template';
-import { OverlaySharedRouteTemplateDirective } from './partials/overlay-shared-route-template';
-import { OverlaySharedRouteTemplateOutletComponent } from './partials/overlay-shared-route-template-outlet';
-import { OverlaySidebarComponent } from './partials/overlay-sidebar';
-import { OverlayTitleDirective } from './partials/overlay-title';
-import { OverlayService } from './services';
-
-export const OverlayImports = [
-  OverlayCloseDirective,
-  OverlayTitleDirective,
-  OverlayHeaderDirective,
-  OverlayBodyComponent,
-  OverlayFooterDirective,
-  OverlayMainDirective,
-] as const;
-
-export const OverlayWithRoutingImports = [
-  ...OverlayImports,
-  OverlayHeaderTemplateDirective,
-  OverlayRouterOutletComponent,
-  OverlayRouterLinkDirective,
-  OverlayRouteHeaderTemplateOutletComponent,
-  OverlayBackOrCloseDirective,
-  OverlaySharedRouteTemplateOutletComponent,
-  OverlaySharedRouteTemplateDirective,
-  OverlayRouterOutletDisabledTemplateDirective,
-] as const;
-
-export const OverlayWithSidebarImports = [...OverlayWithRoutingImports, OverlaySidebarComponent] as const;
-
-export const provideOverlay = () => {
-  return [OverlayService, OVERLAY_SCROLL_STRATEGY_PROVIDER, Dialog, CDK_DIALOG_SCROLL_STRATEGY_PROVIDER];
-};

package/src/lib/components/overlay/components/overlay/partials/overlay-back-or-close/overlay-back-or-close.directive.ts

@@ -1,40 +0,0 @@
-import { Location } from '@angular/common';
-import { Directive, ElementRef, InjectionToken, booleanAttribute, inject, input } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter, fromEvent, tap } from 'rxjs';
-import { OverlayRef, OverlayRouterService } from '../../utils';
-
-export const OVERLAY_BACK_OR_CLOSE_TOKEN = new InjectionToken<OverlayBackOrCloseDirective>(
-  'OVERLAY_BACK_OR_CLOSE_TOKEN',
-);
-
-@Directive({
-  selector: '[etOverlayBackOrClose]',
-  standalone: true,
-  providers: [
-    {
-      provide: OVERLAY_BACK_OR_CLOSE_TOKEN,
-      useExisting: OverlayBackOrCloseDirective,
-    },
-  ],
-  host: {
-    class: 'et-overlay-back-or-close',
-    type: 'button',
-  },
-})
-export class OverlayBackOrCloseDirective {
-  locationService = inject(Location);
-  overlayRef = inject(OverlayRef);
-  router = inject(OverlayRouterService);
-  disabled = input(false, { transform: booleanAttribute });
-
-  constructor() {
-    fromEvent<PointerEvent>(inject<ElementRef<HTMLButtonElement>>(ElementRef).nativeElement, 'click')
-      .pipe(
-        filter(() => !this.disabled()),
-        tap(() => this.locationService.back()),
-        takeUntilDestroyed(),
-      )
-      .subscribe();
-  }
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-body/overlay-body.component.ts

@@ -1,163 +0,0 @@
-import {
-  Component,
-  ElementRef,
-  InjectionToken,
-  Input,
-  OnInit,
-  computed,
-  effect,
-  inject,
-  signal,
-  viewChild,
-} from '@angular/core';
-import {
-  CurrentElementVisibility,
-  RootBoundaryDirective,
-  isElementVisible,
-  nextFrame,
-  signalElementIntersection,
-  signalElementScrollState,
-  signalHostClasses,
-} from '@ethlete/core';
-import { OverlayService } from '../../services';
-import { OverlayRef, getClosestOverlay } from '../../utils';
-
-export const OVERLAY_BODY_TOKEN = new InjectionToken<OverlayBodyComponent>('OVERLAY_BODY_TOKEN');
-
-export type OverlayBodyDividerType = 'static' | 'dynamic' | false;
-
-@Component({
-  selector: '[et-overlay-body], et-overlay-body',
-  template: `
-    <div class="et-overlay-body-container">
-      <div #firstElement class="et-overlay-body-start-element"></div>
-      <ng-content />
-      <div #lastElement class="et-overlay-body-end-element"></div>
-    </div>
-  `,
-  standalone: true,
-  providers: [
-    {
-      provide: OVERLAY_BODY_TOKEN,
-      useExisting: OverlayBodyComponent,
-    },
-  ],
-  hostDirectives: [RootBoundaryDirective],
-  host: {
-    class: 'et-overlay-body',
-  },
-})
-export class OverlayBodyComponent implements OnInit {
-  private _overlayRef = inject(OverlayRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _overlayService = inject(OverlayService);
-
-  @Input({ alias: 'dividers' })
-  set __dividers(value: OverlayBodyDividerType) {
-    this.dividers.set(value);
-  }
-  protected readonly dividers = signal<OverlayBodyDividerType>(false);
-
-  readonly firstElement = viewChild<ElementRef<HTMLElement> | null>('firstElement');
-  readonly lastElement = viewChild<ElementRef<HTMLElement> | null>('lastElement');
-
-  private readonly _dividersEnabled = computed(() => this.dividers() === 'dynamic' || this.dividers() === 'static');
-  private readonly _dynamicDividersEnabled = computed(() => this.dividers() === 'dynamic');
-
-  private readonly containerScrollState = signalElementScrollState(this._elementRef);
-  private readonly firstElementIntersection = signalElementIntersection(this.firstElement, {
-    root: this._elementRef,
-    enabled: this._dynamicDividersEnabled,
-  });
-  private readonly firstElementVisibility = signal<CurrentElementVisibility | null>(null);
-  private readonly lastElementIntersection = signalElementIntersection(this.lastElement, {
-    root: this._elementRef,
-    enabled: this._dynamicDividersEnabled,
-  });
-  private readonly lastElementVisibility = signal<CurrentElementVisibility | null>(null);
-
-  private readonly canScroll = computed(() => this.containerScrollState().canScrollHorizontally);
-
-  private readonly isAtStart = computed(() => {
-    if (!this.canScroll()) {
-      return true;
-    }
-
-    const intersection = this.firstElementIntersection()[0];
-
-    if (!intersection) {
-      return this.firstElementVisibility()?.inline ?? true;
-    }
-
-    return intersection.isIntersecting;
-  });
-  private readonly isAtEnd = computed(() => {
-    if (!this.canScroll()) {
-      return true;
-    }
-
-    const intersection = this.lastElementIntersection()[0];
-
-    if (!intersection) {
-      return this.lastElementVisibility()?.inline ?? true;
-    }
-
-    return intersection.isIntersecting;
-  });
-
-  private readonly enableDividerAnimations = signal(false);
-
-  readonly hostClassBindings = signalHostClasses({
-    'et-overlay-body--render-dividers': this._dividersEnabled,
-    'et-overlay-body--dynamic-dividers': this._dynamicDividersEnabled,
-    'et-overlay-body--enable-divider-animations': this.enableDividerAnimations,
-
-    'et-scrollable-body--can-scroll': this.canScroll,
-    'et-scrollable-body--is-at-start': computed(() => (this._dynamicDividersEnabled() ? this.isAtStart() : false)),
-    'et-scrollable-body--is-at-end': computed(() => (this._dynamicDividersEnabled() ? this.isAtEnd() : false)),
-  });
-
-  constructor() {
-    effect(
-      () => {
-        const scrollable = this._elementRef.nativeElement;
-        const firstElement = this.firstElement()?.nativeElement;
-        const lastElement = this.lastElement()?.nativeElement;
-
-        if (!scrollable || !firstElement || !lastElement) {
-          return;
-        }
-
-        this.firstElementVisibility.set(
-          isElementVisible({
-            container: scrollable,
-            element: firstElement,
-          }),
-        );
-
-        this.lastElementVisibility.set(
-          isElementVisible({
-            container: scrollable,
-            element: lastElement,
-          }),
-        );
-
-        // We need to wait one frame before enabling animations to prevent a animation from playing during initial render.
-        nextFrame(() => this.enableDividerAnimations.set(true));
-      },
-      { allowSignalWrites: true },
-    );
-  }
-
-  ngOnInit() {
-    if (!this._overlayRef) {
-      const closestRef = getClosestOverlay(this._elementRef, this._overlayService.openOverlays);
-
-      if (!closestRef) {
-        throw Error('No closest ref found');
-      }
-
-      this._overlayRef = closestRef;
-    }
-  }
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-close/overlay-close.directive.ts

@@ -1,56 +0,0 @@
-import { Directive, ElementRef, HostBinding, HostListener, Input, OnInit, inject } from '@angular/core';
-import { OverlayService } from '../../services';
-import { OverlayRef, getClosestOverlay } from '../../utils';
-
-@Directive({
-  selector: '[et-overlay-close], [etOverlayClose]',
-  exportAs: 'etOverlayClose',
-  host: {
-    '[attr.aria-label]': 'ariaLabel || null',
-  },
-  standalone: true,
-})
-export class OverlayCloseDirective implements OnInit {
-  private _overlayRef = inject(OverlayRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _overlayService = inject(OverlayService);
-
-  @Input('aria-label')
-  ariaLabel?: string;
-
-  @Input()
-  @HostBinding('attr.type')
-  type: 'submit' | 'button' | 'reset' = 'button';
-
-  @Input('et-overlay-close')
-  closeResult: unknown;
-
-  @Input('etOverlayClose')
-  set _closeResult(value: unknown) {
-    this.closeResult = value;
-  }
-
-  ngOnInit() {
-    if (!this._overlayRef) {
-      const closestRef = getClosestOverlay(this._elementRef, this._overlayService.openOverlays);
-
-      if (!closestRef) {
-        throw Error('No closest ref found');
-      }
-
-      this._overlayRef = closestRef;
-    }
-  }
-
-  @HostListener('click', ['$event'])
-  _onButtonClick(event: MouseEvent) {
-    if (!this._overlayRef) {
-      return;
-    }
-
-    this._overlayRef._closeOverlayVia(
-      event.screenX === 0 && event.screenY === 0 ? 'keyboard' : 'mouse',
-      this.closeResult,
-    );
-  }
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-footer/overlay-footer.directive.ts

@@ -1,36 +0,0 @@
-import { Directive, ElementRef, InjectionToken, OnInit, inject } from '@angular/core';
-import { OverlayService } from '../../services';
-import { OverlayRef, getClosestOverlay } from '../../utils';
-
-export const OVERLAY_FOOTER_TOKEN = new InjectionToken<OverlayFooterDirective>('OVERLAY_FOOTER_TOKEN');
-
-@Directive({
-  selector: '[etOverlayFooter], et-overlay-footer',
-  standalone: true,
-  providers: [
-    {
-      provide: OVERLAY_FOOTER_TOKEN,
-      useExisting: OverlayFooterDirective,
-    },
-  ],
-  host: {
-    class: 'et-overlay-footer',
-  },
-})
-export class OverlayFooterDirective implements OnInit {
-  private _overlayRef = inject(OverlayRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _overlayService = inject(OverlayService);
-
-  ngOnInit() {
-    if (!this._overlayRef) {
-      const closestRef = getClosestOverlay(this._elementRef, this._overlayService.openOverlays);
-
-      if (!closestRef) {
-        throw Error('No closest ref found');
-      }
-
-      this._overlayRef = closestRef;
-    }
-  }
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-header/overlay-header.directive.ts

@@ -1,36 +0,0 @@
-import { Directive, ElementRef, InjectionToken, OnInit, inject } from '@angular/core';
-import { OverlayService } from '../../services';
-import { OverlayRef, getClosestOverlay } from '../../utils';
-
-export const OVERLAY_HEADER_TOKEN = new InjectionToken<OverlayHeaderDirective>('OVERLAY_HEADER_TOKEN');
-
-@Directive({
-  selector: '[etOverlayHeader], et-overlay-header',
-  standalone: true,
-  providers: [
-    {
-      provide: OVERLAY_HEADER_TOKEN,
-      useExisting: OverlayHeaderDirective,
-    },
-  ],
-  host: {
-    class: 'et-overlay-header',
-  },
-})
-export class OverlayHeaderDirective implements OnInit {
-  private _overlayRef = inject(OverlayRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _overlayService = inject(OverlayService);
-
-  ngOnInit() {
-    if (!this._overlayRef) {
-      const closestRef = getClosestOverlay(this._elementRef, this._overlayService.openOverlays);
-
-      if (!closestRef) {
-        throw Error('No closest ref found');
-      }
-
-      this._overlayRef = closestRef;
-    }
-  }
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-header-template/overlay-header-template.directive.ts

@@ -1,48 +0,0 @@
-import { Directive, ElementRef, InjectionToken, OnDestroy, OnInit, TemplateRef, inject } from '@angular/core';
-import { OverlayService } from '../../services';
-import { OverlayRef, getClosestOverlay } from '../../utils';
-
-export const OVERLAY_HEADER_TEMPLATE_TOKEN = new InjectionToken<OverlayHeaderTemplateDirective>(
-  'OVERLAY_HEADER_TEMPLATE_TOKEN',
-);
-
-@Directive({
-  selector: 'ng-template[etOverlayHeaderTemplate]',
-  standalone: true,
-  providers: [
-    {
-      provide: OVERLAY_HEADER_TEMPLATE_TOKEN,
-      useExisting: OverlayHeaderTemplateDirective,
-    },
-  ],
-})
-export class OverlayHeaderTemplateDirective implements OnInit, OnDestroy {
-  private _overlayRef = inject(OverlayRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _overlayService = inject(OverlayService);
-
-  template = inject(TemplateRef);
-
-  constructor() {
-    this._overlayRef?._setCurrentHeaderTemplate(this.template);
-  }
-
-  ngOnInit() {
-    if (!this._overlayRef) {
-      const closestRef = getClosestOverlay(this._elementRef, this._overlayService.openOverlays);
-
-      if (!closestRef) {
-        throw Error('No closest ref found');
-      }
-
-      this._overlayRef = closestRef;
-      this._overlayRef._setCurrentHeaderTemplate(this.template);
-    }
-  }
-
-  ngOnDestroy(): void {
-    if (this._overlayRef?.headerTemplate() === this.template) {
-      this._overlayRef?._setCurrentHeaderTemplate(null);
-    }
-  }
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-main/overlay-main.directive.ts

@@ -1,46 +0,0 @@
-import { Directive, ElementRef, InjectionToken, OnInit, booleanAttribute, inject, input } from '@angular/core';
-import { signalHostClasses } from '@ethlete/core';
-import { OverlayService } from '../../services';
-import { OverlayRef, getClosestOverlay } from '../../utils';
-
-export const OVERLAY_MAIN_TOKEN = new InjectionToken<OverlayMainDirective>('OVERLAY_MAIN_TOKEN');
-
-@Directive({
-  selector: '[etOverlayMain], et-overlay-main',
-  standalone: true,
-  providers: [
-    {
-      provide: OVERLAY_MAIN_TOKEN,
-      useExisting: OverlayMainDirective,
-    },
-  ],
-})
-export class OverlayMainDirective implements OnInit {
-  private _parent = inject(OVERLAY_MAIN_TOKEN, { optional: true, skipSelf: true });
-
-  private _overlayRef = inject(OverlayRef, { optional: true });
-  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly _overlayService = inject(OverlayService);
-
-  enabled = input(true, { alias: 'etOverlayMain', transform: booleanAttribute });
-
-  hostClassBindings = signalHostClasses({
-    'et-overlay-main': this.enabled,
-  });
-
-  ngOnInit() {
-    if (this._parent) {
-      throw new Error('An overlay must not contain nested <et-overlay-main> elements or etOverlayMain directives.');
-    }
-
-    if (!this._overlayRef) {
-      const closestRef = getClosestOverlay(this._elementRef, this._overlayService.openOverlays);
-
-      if (!closestRef) {
-        throw new Error('No closest ref found');
-      }
-
-      this._overlayRef = closestRef;
-    }
-  }
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-route-header-template-outlet/overlay-route-header-template-outlet.component.ts

@@ -1,75 +0,0 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, inject, viewChild } from '@angular/core';
-import {
-  ANIMATED_LIFECYCLE_TOKEN,
-  AnimatedIfDirective,
-  AnimatedLifecycleDirective,
-  signalHostClasses,
-} from '@ethlete/core';
-import { OverlayRef, OverlayRouterService } from '../../utils';
-
-@Component({
-  selector: 'et-overlay-route-header-template-outlet',
-  template: `
-    <div class="et-overlay-route-header-template-outlet">
-      <div [skipNextEnter]="true" class="et-overlay-route-header-template-outlet-item" etAnimatedLifecycle>
-        <ng-container *etAnimatedIf="overlay.headerTemplate()">
-          <ng-container *ngTemplateOutlet="overlay.headerTemplate()" />
-        </ng-container>
-      </div>
-    </div>
-  `,
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: 'et-overlay-route-header-template-outlet-host',
-  },
-  styles: `
-    .et-overlay-route-header-template-outlet-host {
-      --_et-overlay-router-transition-easing: var(--ease-in-out-5);
-    }
-
-    .et-overlay-route-header-template-outlet {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      grid-template-rows: minmax(0, 1fr);
-      overflow-x: hidden;
-    }
-
-    .et-overlay-route-header-template-outlet-item {
-      grid-area: 1 / 1 / 2 / 2;
-      pointer-events: none;
-
-      > * {
-        pointer-events: auto;
-      }
-
-      &.et-animation-enter-from {
-        opacity: 0;
-      }
-
-      &.et-animation-leave-to {
-        opacity: 0;
-      }
-
-      &.et-animation-enter-active,
-      &.et-animation-leave-active {
-        transition:
-          transform 300ms var(--_et-overlay-router-transition-easing),
-          opacity 300ms var(--_et-overlay-router-transition-easing);
-      }
-    }
-  `,
-  imports: [AnimatedIfDirective, AnimatedLifecycleDirective, NgTemplateOutlet],
-})
-export class OverlayRouteHeaderTemplateOutletComponent {
-  router = inject(OverlayRouterService);
-  overlay = inject(OverlayRef);
-  animatedLifecycle = viewChild.required(ANIMATED_LIFECYCLE_TOKEN);
-
-  hostClassBindings = signalHostClasses({
-    'et-overlay-router-outlet-nav-dir--backward': computed(() => this.router.navigationDirection() === 'backward'),
-    'et-overlay-router-outlet-nav-dir--forward': computed(() => this.router.navigationDirection() === 'forward'),
-  });
-}

package/src/lib/components/overlay/components/overlay/partials/overlay-router-link/overlay-router-link.directive.ts

@@ -1,44 +0,0 @@
-import { Directive, ElementRef, InjectionToken, booleanAttribute, computed, inject, input } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { signalHostClasses } from '@ethlete/core';
-import { filter, fromEvent, tap } from 'rxjs';
-import { OverlayRouterNavigationDirection, OverlayRouterService } from '../../utils';
-
-export const OVERLAY_ROUTER_LINK_TOKEN = new InjectionToken<OverlayRouterLinkDirective>('OVERLAY_ROUTER_LINK_TOKEN');
-
-@Directive({
-  selector: '[etOverlayRouterLink]',
-  standalone: true,
-  providers: [
-    {
-      provide: OVERLAY_ROUTER_LINK_TOKEN,
-      useExisting: OverlayRouterLinkDirective,
-    },
-  ],
-  host: {
-    class: 'et-overlay-router-link',
-    type: 'button',
-  },
-})
-export class OverlayRouterLinkDirective {
-  router = inject(OverlayRouterService);
-  path = input.required<string | (string | number)[]>({ alias: 'etOverlayRouterLink' });
-  disabled = input(false, { transform: booleanAttribute });
-  navigationDirection = input<OverlayRouterNavigationDirection | null>(null);
-
-  hostClassBindings = signalHostClasses({
-    'et-overlay-router-link--active': computed(
-      () => this.router.resolvePath(this.path()).route === this.router.currentRoute(),
-    ),
-  });
-
-  constructor() {
-    fromEvent<PointerEvent>(inject<ElementRef<HTMLButtonElement>>(ElementRef).nativeElement, 'click')
-      .pipe(
-        filter(() => !this.disabled()),
-        tap(() => this.router.navigate(this.path(), { navigationDirection: this.navigationDirection() ?? undefined })),
-        takeUntilDestroyed(),
-      )
-      .subscribe();
-  }
-}