@ethlete/cdk 4.28.0 → 4.28.1

package/src/lib/components/overlay/components/overlay/services/overlay.service.ts

@@ -1,367 +0,0 @@
-import { coerceCssPixelValue } from '@angular/cdk/coercion';
-import { Dialog as CdkDialog, DialogConfig as CdkDialogConfig } from '@angular/cdk/dialog';
-import { ComponentType } from '@angular/cdk/overlay';
-import { ComponentRef, Injectable, OnDestroy, TemplateRef, inject } from '@angular/core';
-import { ROOT_BOUNDARY_TOKEN, RootBoundaryDirective, ViewportService, createDestroy, equal } from '@ethlete/core';
-import { ProvideThemeDirective, THEME_PROVIDER } from '@ethlete/theming';
-import { Observable, Subject, combineLatest, defer, map, of, pairwise, startWith, takeUntil, tap } from 'rxjs';
-import { OverlayContainerComponent } from '../components/overlay-container';
-import { OVERLAY_CONFIG, OVERLAY_DATA, OVERLAY_DEFAULT_OPTIONS, OVERLAY_SCROLL_STRATEGY } from '../constants';
-import { OverlayConfig } from '../types';
-import {
-  ET_OVERLAY_BOTTOM_SHEET_CLASS,
-  ET_OVERLAY_LEFT_SHEET_CLASS,
-  ET_OVERLAY_RIGHT_SHEET_CLASS,
-  ET_OVERLAY_TOP_SHEET_CLASS,
-  OverlayPositionBuilder,
-  OverlayRef,
-  createOverlayConfig,
-} from '../utils';
-
-let uniqueId = 0;
-const ID_PREFIX = 'et-overlay-';
-
-const setStyle = (el: HTMLElement, style: string, value: string | number | null | undefined) => {
-  if (value === null || value === undefined) {
-    el.style.removeProperty(style);
-  } else {
-    el.style.setProperty(style, coerceCssPixelValue(value));
-  }
-};
-
-const setClass = (el: HTMLElement, prevClass?: string | string[], currClass?: string | string[]) => {
-  if (!equal(prevClass, currClass)) {
-    if (prevClass) {
-      if (Array.isArray(prevClass)) {
-        el.classList.remove(...prevClass);
-      } else {
-        el.classList.remove(prevClass);
-      }
-    }
-
-    if (currClass) {
-      if (Array.isArray(currClass)) {
-        el.classList.add(...currClass);
-      } else {
-        el.classList.add(currClass);
-      }
-    }
-  }
-};
-
-const isHtmlElement = (element: HTMLElement | unknown): element is HTMLElement => {
-  return element instanceof HTMLElement;
-};
-
-const isTouchEvent = (event: Event): event is TouchEvent => {
-  return event.type[0] === 't';
-};
-
-const isPointerEvent = (event: Event): event is PointerEvent => {
-  return event.type[0] === 'c';
-};
-
-@Injectable()
-export class OverlayService implements OnDestroy {
-  private readonly _destroy$ = createDestroy();
-  private readonly _defaultOptions = inject(OVERLAY_DEFAULT_OPTIONS, { optional: true });
-  private readonly _scrollStrategy = inject(OVERLAY_SCROLL_STRATEGY);
-  private readonly _parentOverlayService = inject(OverlayService, { optional: true, skipSelf: true });
-  private readonly _dialog = inject(CdkDialog);
-  private readonly _viewportService = inject(ViewportService);
-
-  private readonly _openOverlaysAtThisLevel: OverlayRef[] = [];
-  private readonly _afterAllClosedAtThisLevel = new Subject<void>();
-  private readonly _afterOpenedAtThisLevel = new Subject<OverlayRef>();
-
-  readonly positions = new OverlayPositionBuilder();
-
-  readonly afterAllClosed = defer(() =>
-    this.openOverlays.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)),
-  ) as Observable<void>;
-
-  get openOverlays(): OverlayRef[] {
-    return this._parentOverlayService ? this._parentOverlayService.openOverlays : this._openOverlaysAtThisLevel;
-  }
-
-  get afterOpened(): Subject<OverlayRef> {
-    return this._parentOverlayService ? this._parentOverlayService.afterOpened : this._afterOpenedAtThisLevel;
-  }
-
-  ngOnDestroy() {
-    this._closeOverlays(this._openOverlaysAtThisLevel);
-    this._afterAllClosedAtThisLevel.complete();
-    this._afterOpenedAtThisLevel.complete();
-  }
-
-  open<T, D = unknown, R = unknown>(component: ComponentType<T>, config: OverlayConfig<D>): OverlayRef<T, R>;
-  open<T, D = unknown, R = unknown>(template: TemplateRef<T>, config: OverlayConfig<D>): OverlayRef<T, R>;
-  open<T, D = unknown, R = unknown>(
-    template: ComponentType<T> | TemplateRef<T>,
-    config: OverlayConfig<D>,
-  ): OverlayRef<T, R>;
-  open<T, D = unknown, R = unknown>(
-    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
-    config: OverlayConfig<D>,
-  ): OverlayRef<T, R> {
-    let overlayRef: OverlayRef<T, R>;
-
-    const composedConfig = createOverlayConfig<D>(this._defaultOptions as OverlayConfig<D>, config);
-    composedConfig.id = composedConfig.id || `${ID_PREFIX}${uniqueId++}`;
-    composedConfig.scrollStrategy = composedConfig.scrollStrategy || this._scrollStrategy();
-
-    const cdkRef = this._dialog.open<R, D, T>(componentOrTemplateRef, {
-      ...composedConfig,
-      disableClose: true,
-      closeOnDestroy: false,
-      panelClass: 'et-overlay-pane',
-      container: {
-        type: OverlayContainerComponent,
-        providers: () => [
-          { provide: OVERLAY_CONFIG, useValue: composedConfig },
-          { provide: CdkDialogConfig, useValue: composedConfig },
-        ],
-      },
-      templateContext: () => ({ dialogRef: overlayRef }),
-      providers: (ref, cdkConfig, overlayContainer) => {
-        const container = overlayContainer as OverlayContainerComponent;
-        overlayRef = new OverlayRef(ref, composedConfig, container);
-
-        return [
-          { provide: OverlayContainerComponent, useValue: overlayContainer },
-          { provide: THEME_PROVIDER, useValue: container._themeProvider },
-          { provide: ProvideThemeDirective, useValue: container._themeProvider },
-          { provide: ROOT_BOUNDARY_TOKEN, useValue: container._rootBoundary },
-          { provide: RootBoundaryDirective, useValue: container._rootBoundary },
-          { provide: OVERLAY_DATA, useValue: cdkConfig.data },
-          { provide: OverlayRef, useValue: overlayRef },
-          ...(composedConfig.providers ?? []),
-        ];
-      },
-    });
-
-    /* eslint-disable @typescript-eslint/no-non-null-assertion*/
-    (overlayRef! as { componentRef: ComponentRef<T> }).componentRef = cdkRef.componentRef!;
-    overlayRef!.componentInstance = cdkRef.componentInstance!;
-
-    (cdkRef.containerInstance as OverlayContainerComponent).overlayRef = overlayRef!;
-
-    const containerEl = overlayRef!._containerInstance.elementRef.nativeElement as HTMLElement;
-    const overlayPaneEl = cdkRef.overlayRef.overlayElement;
-    const backdropEl = cdkRef.overlayRef.backdropElement;
-    const overlayWrapper = cdkRef.overlayRef.hostElement;
-    const defaultAnimationBuffer = 50; // 50px since the default animation uses spring physics and thus will overshoot.
-    const useDefaultAnimation = composedConfig.customAnimated !== true;
-    const origin = composedConfig.origin;
-
-    combineLatest(
-      composedConfig.positions.map((breakpoint) =>
-        (breakpoint.breakpoint ? this._viewportService.observe({ min: breakpoint.breakpoint }) : of(true)).pipe(
-          map((isActive) => ({
-            isActive,
-            config: breakpoint.config,
-            size:
-              typeof breakpoint.breakpoint === 'number'
-                ? breakpoint.breakpoint
-                : breakpoint.breakpoint === undefined
-                  ? 0
-                  : this._viewportService.getBreakpointSize(breakpoint.breakpoint, 'min'),
-          })),
-        ),
-      ),
-    )
-      .pipe(
-        takeUntil(overlayRef!.afterClosed()),
-        takeUntil(this._destroy$),
-        map((entries) => {
-          const activeBreakpoints = entries.filter((entry) => entry.isActive);
-          const highestBreakpoint = activeBreakpoints.reduce((prev, curr) => (prev.size > curr.size ? prev : curr));
-
-          return highestBreakpoint.config;
-        }),
-        startWith(null),
-        pairwise(),
-        tap(([prevConfig, currConfig]) => {
-          if (!currConfig) return;
-
-          const containerClass = currConfig.containerClass;
-
-          const applyDefaultMaxWidths = () => {
-            setStyle(overlayPaneEl, 'max-width', currConfig.maxWidth);
-            setStyle(overlayPaneEl, 'max-height', currConfig.maxHeight);
-          };
-
-          const combineOrMakeCalc = (value: string | number | null | undefined, append: string) => {
-            if (!value) return append;
-
-            if (typeof value === 'number') {
-              return `calc(${value}px + ${append})`;
-            } else if (value.startsWith('calc(')) {
-              return `${value.slice(0, value.length - 1)} + ${append})`;
-            }
-
-            return `calc(${value} + ${append})`;
-          };
-
-          if (origin) {
-            // TODO: If getBoundingClientRect is used it should use the center of the element.
-            const originX = isHtmlElement(origin)
-              ? origin.getBoundingClientRect().left
-              : isTouchEvent(origin)
-                ? origin.targetTouches[0]!.clientX
-                : isPointerEvent(origin)
-                  ? origin.clientX !== 0
-                    ? origin.clientX
-                    : (origin.target as HTMLElement).getBoundingClientRect().left
-                  : -1;
-            const originY = isHtmlElement(origin)
-              ? origin.getBoundingClientRect().top
-              : isTouchEvent(origin)
-                ? origin.targetTouches[0]!.clientY
-                : isPointerEvent(origin)
-                  ? origin.clientY !== 0
-                    ? origin.clientY
-                    : (origin.target as HTMLElement).getBoundingClientRect().top
-                  : -1;
-
-            if (originX !== -1 && originY !== -1 && currConfig.applyTransformOrigin) {
-              setStyle(containerEl, 'transform-origin', `${originX}px ${originY}px`);
-            } else {
-              setStyle(containerEl, 'transform-origin', null);
-            }
-          }
-
-          if (useDefaultAnimation && containerClass?.length) {
-            if (
-              containerClass?.includes(ET_OVERLAY_LEFT_SHEET_CLASS) ||
-              containerClass?.includes(ET_OVERLAY_RIGHT_SHEET_CLASS)
-            ) {
-              setStyle(
-                overlayPaneEl,
-                'max-width',
-                combineOrMakeCalc(currConfig.maxWidth, `${defaultAnimationBuffer}px`),
-              );
-              setStyle(overlayPaneEl, 'max-height', currConfig.maxHeight);
-            } else if (
-              containerClass?.includes(ET_OVERLAY_TOP_SHEET_CLASS) ||
-              containerClass?.includes(ET_OVERLAY_BOTTOM_SHEET_CLASS)
-            ) {
-              setStyle(
-                overlayPaneEl,
-                'max-height',
-                combineOrMakeCalc(currConfig.maxHeight, `${defaultAnimationBuffer}px`),
-              );
-
-              setStyle(overlayPaneEl, 'max-width', currConfig.maxWidth);
-            } else {
-              applyDefaultMaxWidths();
-            }
-          } else {
-            applyDefaultMaxWidths();
-          }
-
-          setStyle(overlayPaneEl, 'min-width', currConfig.minWidth);
-          setStyle(overlayPaneEl, 'min-height', currConfig.minHeight);
-
-          setStyle(overlayPaneEl, 'width', currConfig.width);
-          setStyle(overlayPaneEl, 'height', currConfig.height);
-
-          setClass(containerEl, prevConfig?.containerClass, currConfig?.containerClass);
-          setClass(overlayPaneEl, prevConfig?.paneClass, currConfig?.paneClass);
-          setClass(overlayWrapper, prevConfig?.overlayClass, currConfig?.overlayClass);
-
-          // FIXME: These classes should only be removed if no open overlays require them inside their config.
-          setClass(document.documentElement, prevConfig?.documentClass, currConfig?.documentClass);
-          setClass(document.body, prevConfig?.bodyClass, currConfig?.bodyClass);
-
-          if (backdropEl) {
-            setClass(backdropEl, prevConfig?.backdropClass, currConfig?.backdropClass);
-          }
-
-          if (!equal(prevConfig?.position, currConfig?.position)) {
-            overlayRef.updatePosition(currConfig.position);
-          }
-
-          if (currConfig.positionStrategy) {
-            cdkRef.overlayRef.updatePositionStrategy(currConfig.positionStrategy());
-          } else {
-            cdkRef.overlayRef.updatePosition();
-          }
-
-          if (currConfig.dragToDismiss) {
-            overlayRef._containerInstance._enableDragToDismiss(currConfig.dragToDismiss);
-          } else {
-            overlayRef._containerInstance._disableDragToDismiss();
-          }
-        }),
-      )
-      .subscribe();
-
-    this.openOverlays.push(overlayRef!);
-    this.afterOpened.next(overlayRef!);
-
-    overlayRef!.beforeClosed().subscribe(() => {
-      // FIXME: These classes should only be removed if no open overlays require them inside their config.
-      const documentClasses = composedConfig.positions.map((position) => position.config.documentClass);
-
-      for (const klass of documentClasses) {
-        if (!klass) continue;
-
-        if (Array.isArray(klass)) {
-          document.documentElement.classList.remove(...klass);
-        } else {
-          document.documentElement.classList.remove(klass);
-        }
-      }
-
-      const bodyClasses = composedConfig.positions.map((position) => position.config.bodyClass);
-
-      for (const klass of bodyClasses) {
-        if (!klass) continue;
-
-        if (Array.isArray(klass)) {
-          document.body.classList.remove(...klass);
-        } else {
-          document.body.classList.remove(klass);
-        }
-      }
-    });
-
-    overlayRef!.afterClosed().subscribe(() => {
-      const index = this.openOverlays.indexOf(overlayRef);
-
-      if (index === -1) return;
-
-      this.openOverlays.splice(index, 1);
-
-      if (!this.openOverlays.length) {
-        this._getAfterAllClosed().next();
-      }
-    });
-
-    return overlayRef!;
-
-    /* eslint-enable @typescript-eslint/no-non-null-assertion*/
-  }
-
-  closeAll(): void {
-    this._closeOverlays(this.openOverlays);
-  }
-
-  getOverlayById(id: string): OverlayRef | undefined {
-    return this.openOverlays.find((overlay) => overlay.id === id);
-  }
-
-  private _closeOverlays(overlays: OverlayRef[]) {
-    let i = overlays.length;
-
-    while (i--) {
-      overlays[i]?.close();
-    }
-  }
-
-  private _getAfterAllClosed(): Subject<void> {
-    const parent = this._parentOverlayService;
-    return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
-  }
-}

package/src/lib/components/overlay/components/overlay/stories/components/index.ts

@@ -1,3 +0,0 @@
-export * from './overlay-host.storybook.component';
-export * from './overlay-route-host.storybook.component';
-export * from './overlay.storybook.component';

package/src/lib/components/overlay/components/overlay/stories/components/overlay-host.storybook.component.ts

@@ -1,174 +0,0 @@
-import { Component, inject, Injectable, Injector, ViewContainerRef } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { OverlayImports } from '../../overlay.imports';
-import { OverlayService } from '../../services';
-import { provideFilterOverlayConfig, provideOverlayRouterConfig, provideSidebarOverlayConfig } from '../../utils';
-import {
-  NewOverlayStorybookComponent,
-  NewOverlaySubRoute1StorybookComponent,
-  NewOverlaySubRoute2StorybookComponent,
-  NewOverlaySubRoute3StorybookComponent,
-  NewOverlaySubRoute4StorybookComponent,
-  NewOverlaySubRoute5StorybookComponent,
-  NewOverlaySubRoute6StorybookComponent,
-  NewOverlayWithNavStorybookComponent,
-  OverlayStorybookComponent,
-} from './overlay.storybook.component';
-
-@Injectable()
-export class StorybookExampleService {}
-
-@Component({
-  selector: 'et-sb-overlay-host',
-  template: `
-    <button (click)="topSheet()" type="button">Top sheet</button> <br />
-    <button (click)="bottomSheet()" type="button">Bottom sheet</button> <br />
-    <button (click)="leftSheet()" type="button">Left sheet</button> <br />
-    <button (click)="rightSheet()" type="button">Right sheet</button> <br />
-    <button (click)="fullScreenDialog($event)" type="button">Full screen dialog</button> <br />
-    <button (click)="dialog()" type="button">Dialog</button> <br />
-    <button (click)="transformingBottomSheetToDialog()" type="button">Transforming bottom sheet to dialog</button>
-    <br />
-    <br />
-    <button (click)="dialogWithRouting()" type="button">Dialog with routing</button> <br />
-    <br />
-    <button (click)="dialogWithRoutingAndSidebar($event)" type="button">Dialog with sidebar</button> <br />
-    <br />
-
-    <br />
-    <button (click)="toggleScrollable()" type="button">Toggle scrollable</button> <br />
-
-    <br /><br />
-
-    <button (click)="dialogWithInjector()" type="button">Dialog with injector</button> <br />
-    <button (click)="dialogWithViewContainerRef()" type="button">Dialog with view container ref</button> <br />
-
-    @if (_isScrollable) {
-      <div style="background:#171717; height:200vh; margin-top: 2rem"></div>
-    }
-  `,
-  standalone: true,
-  imports: [OverlayImports],
-})
-export class OverlayHostStorybookComponent {
-  private readonly _overlayService = inject(OverlayService);
-
-  private readonly _vcr = inject(ViewContainerRef);
-  private readonly _injector = inject(Injector);
-
-  _isScrollable = false;
-
-  toggleScrollable() {
-    this._isScrollable = !this._isScrollable;
-  }
-
-  topSheet() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      positions: this._overlayService.positions.topSheet({}),
-    });
-  }
-
-  bottomSheet() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      positions: this._overlayService.positions.bottomSheet({}),
-    });
-  }
-
-  leftSheet() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      positions: this._overlayService.positions.leftSheet({}),
-    });
-  }
-
-  rightSheet() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      positions: this._overlayService.positions.rightSheet({}),
-    });
-  }
-
-  fullScreenDialog(event: MouseEvent | TouchEvent) {
-    this._overlayService.open(OverlayStorybookComponent, {
-      origin: event,
-      positions: this._overlayService.positions.fullScreenDialog({}),
-    });
-  }
-
-  dialog() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      positions: this._overlayService.positions.dialog({}),
-    });
-  }
-
-  dialogWithViewContainerRef() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      viewContainerRef: this._vcr,
-      positions: this._overlayService.positions.dialog({}),
-    });
-  }
-
-  dialogWithInjector() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      injector: this._injector,
-      positions: this._overlayService.positions.dialog({}),
-    });
-  }
-
-  transformingBottomSheetToDialog() {
-    this._overlayService.open(OverlayStorybookComponent, {
-      positions: this._overlayService.positions.transformingBottomSheetToDialog({}),
-    });
-  }
-
-  dialogWithRouting() {
-    this._overlayService.open(NewOverlayStorybookComponent, {
-      positions: this._overlayService.positions.dialog({}),
-      providers: [
-        provideOverlayRouterConfig({
-          routes: [
-            {
-              path: '/',
-              component: NewOverlaySubRoute1StorybookComponent,
-            },
-            {
-              path: '/sub-route',
-              component: NewOverlaySubRoute2StorybookComponent,
-            },
-            {
-              path: '/sub-route-2',
-              component: NewOverlaySubRoute3StorybookComponent,
-            },
-          ],
-        }),
-        provideFilterOverlayConfig({ form: new FormGroup({}) }),
-      ],
-    });
-  }
-
-  dialogWithRoutingAndSidebar(event: MouseEvent | TouchEvent) {
-    this._overlayService.open(NewOverlayWithNavStorybookComponent, {
-      positions: this._overlayService.positions.transformingFullScreenDialogToDialog({
-        dialog: { width: '550px', height: '500px' },
-      }),
-      origin: event,
-      providers: [
-        provideOverlayRouterConfig({
-          routes: [
-            {
-              path: '/',
-              component: NewOverlaySubRoute4StorybookComponent,
-            },
-            {
-              path: '/sub-route',
-              component: NewOverlaySubRoute5StorybookComponent,
-            },
-            {
-              path: '/sub-route-2',
-              component: NewOverlaySubRoute6StorybookComponent,
-            },
-          ],
-        }),
-        provideSidebarOverlayConfig({}),
-      ],
-    });
-  }
-}

package/src/lib/components/overlay/components/overlay/stories/components/overlay-route-host.storybook.component.ts

@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'et-sb-overlay-host-route',
-  template: ` <router-outlet /> `,
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: 'et-sb-overlay-host-route',
-  },
-  imports: [RouterOutlet],
-})
-export class StorybookOverlayHostRouteComponent {}