npm - @ethlete/cdk - Versions diffs - 4.28.0 → 4.28.1 - Mend

@ethlete/cdk 4.28.0 → 4.28.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1863) hide show

package/src/lib/components/overlay/components/overlay/components/overlay-container/overlay-container.component.scss DELETED Viewed

@@ -1,353 +0,0 @@
-.et-overlay {
-  --et-overlay-padding-inline: 16px;
-  --et-overlay-padding-block: 16px;
-  --et-overlay-header-padding-block-end: 16px;
-  --et-overlay-body-padding-block: 0;
-  --et-overlay-footer-padding-block-start: 16px;
-  --et-overlay-body-divider-color: #565656;
-  --et-overlay-body-min-block-size: 100px;
-  --_et-overlay-drag-handle-inline-size: 32px;
-  --_et-overlay-drag-handle-block-size: 4px;
-  --_et-overlay-drag-handle-block-margin: 22px;
-  --_et-overlay-drag-handle-color: #565656;
-  --_et-overlay-drag-handle-radius: 5px;
-  position: relative;
-  display: grid;
-  overflow: hidden;
-  pointer-events: all;
-  outline: none;
-  > :nth-child(2) {
-    overflow: auto;
-    &:not(.et-overlay-main) {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      grid-template-rows: minmax(0, 1fr);
-    }
-  }
-  &.et-overlay--bottom-sheet .et-overlay-container-drag-handle {
-    display: flex;
-  }
-  &:has(.et-overlay-sidebar-host) {
-    > :nth-child(2) {
-      display: grid;
-      grid-template-columns: 0 1fr;
-    }
-    &:has(.et-overlay-sidebar--visible) > :nth-child(2) {
-      grid-template-columns: auto 1fr;
-    }
-    .et-overlay-router-outlet-host {
-      display: grid;
-      min-block-size: 0;
-    }
-    .et-overlay-router-outlet-page {
-      display: grid;
-      grid-template-rows: minmax(0, 1fr);
-      > * {
-        overflow: auto;
-        &:not(.et-overlay-main) {
-          display: grid;
-          grid-template-columns: minmax(0, 1fr);
-          grid-template-rows: minmax(0, 1fr);
-        }
-      }
-    }
-  }
-}
-.et-overlay-sidebar-host {
-  overflow: auto;
-}
-.et-overlay-main {
-  display: grid;
-  grid-template-rows: minmax(0, 1fr);
-  &:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer) {
-    grid-template-rows: auto minmax(var(--et-overlay-body-min-block-size), 1fr) auto;
-  }
-  &:has(.et-overlay-header):has(.et-overlay-body) {
-    grid-template-rows: auto minmax(var(--et-overlay-body-min-block-size), 1fr);
-  }
-  &:has(.et-overlay-body):has(.et-overlay-footer) {
-    grid-template-rows: minmax(var(--et-overlay-body-min-block-size), 1fr) auto;
-  }
-  &:not(:has(.et-overlay-footer)) {
-    grid-template-rows: minmax(var(--et-overlay-body-min-block-size), 1fr) auto;
-  }
-}
-.et-overlay-container-drag-handle {
-  block-size: var(--_et-overlay-drag-handle-block-size);
-  margin-block: var(--_et-overlay-drag-handle-block-margin);
-  display: none;
-  justify-content: center;
-  &::before {
-    content: '';
-    position: static;
-    inline-size: var(--_et-overlay-drag-handle-inline-size);
-    block-size: var(--_et-overlay-drag-handle-block-size);
-    background-color: var(--_et-overlay-drag-handle-color);
-    border-radius: var(--_et-overlay-drag-handle-radius);
-  }
-}
-.et-overlay-body {
-  display: block;
-  overflow: auto;
-  padding-inline: var(--et-overlay-padding-inline);
-  padding-block: var(--et-overlay-body-padding-block);
-  &:has(.et-overlay-router-outlet-host) {
-    padding: 0;
-    display: grid;
-    overflow: visible;
-    grid-template-columns: minmax(0, 1fr);
-    grid-auto-rows: minmax(0, 1fr);
-    .et-overlay-body-container {
-      display: grid;
-      grid-auto-rows: minmax(0, 1fr);
-      min-height: 0;
-    }
-    .et-overlay-router-outlet-host {
-      display: grid;
-    }
-    .et-overlay-router-outlet-page {
-      padding-inline: var(--et-overlay-padding-inline);
-      padding-block: var(--et-overlay-body-padding-block);
-      overflow: auto;
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      grid-auto-rows: minmax(0, 1fr);
-    }
-  }
-  &.et-overlay-body--enable-divider-animations {
-    transition: border-color 300ms var(--ease-1);
-  }
-  &.et-overlay-body--render-dividers {
-    .et-overlay-main:has(.et-overlay-header) & {
-      border-block-start: 1px solid var(--et-overlay-body-divider-color);
-    }
-    .et-overlay-main:has(.et-overlay-footer) & {
-      border-block-end: 1px solid var(--et-overlay-body-divider-color);
-    }
-    &.et-overlay-body--dynamic-dividers {
-      border-color: var(--et-overlay-body-divider-color);
-      &.et-scrollable-body--is-at-start {
-        border-block-start-color: transparent;
-      }
-      &.et-scrollable-body--is-at-end {
-        border-block-end-color: transparent;
-      }
-    }
-  }
-  .et-overlay-body-container {
-    position: relative;
-    min-block-size: 100%;
-    .et-overlay-body-start-element,
-    .et-overlay-body-end-element {
-      position: absolute;
-      block-size: 1px;
-      pointer-events: none;
-    }
-    .et-overlay-body-start-element {
-      inset-inline: 1px;
-      inset-block-start: 1px;
-    }
-    .et-overlay-body-end-element {
-      inset-inline: 1px;
-      inset-block-end: 1px;
-    }
-  }
-}
-.et-overlay-header {
-  padding-block-start: var(--et-overlay-padding-block);
-  padding-inline: var(--et-overlay-padding-inline);
-  padding-block-end: var(--et-overlay-header-padding-block-end);
-}
-.et-overlay-footer {
-  padding-block-end: var(--et-overlay-padding-block);
-  padding-inline: var(--et-overlay-padding-inline);
-  padding-block-start: var(--et-overlay-footer-padding-block-start);
-}
-.et-overlay-pane {
-  pointer-events: none;
-}
-.et-overlay.et-with-default-animation {
-  &.et-overlay--full-screen-dialog {
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: scale(0) !important;
-      border-radius: 250px;
-    }
-    &.et-animation-enter-active {
-      transition:
-        transform 300ms var(--ease-out-5),
-        border-radius 300ms var(--ease-out-5);
-      @supports (transition-timing-function: linear(0, 1)) {
-        transition:
-          transform 300ms var(--ease-spring-1),
-          border-radius 300ms var(--ease-spring-1);
-      }
-    }
-    &.et-animation-leave-active {
-      transition:
-        transform 150ms var(--ease-in-5),
-        border-radius 150ms var(--ease-in-5);
-    }
-  }
-  &.et-overlay--bottom-sheet {
-    bottom: -50px;
-    padding-bottom: 50px;
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translateY(100%) !important;
-    }
-    &.et-animation-enter-active {
-      transition: transform 300ms var(--ease-out-5);
-      @supports (transition-timing-function: linear(0, 1)) {
-        transition: transform 300ms var(--ease-spring-1);
-      }
-    }
-    &.et-animation-leave-active {
-      transition: transform 150ms var(--ease-in-5);
-    }
-  }
-  &.et-overlay--top-sheet {
-    top: -50px;
-    padding-top: 50px;
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translateY(-100%) !important;
-    }
-    &.et-animation-enter-active {
-      transition: transform 300ms var(--ease-out-5);
-      @supports (transition-timing-function: linear(0, 1)) {
-        transition: transform 300ms var(--ease-spring-1);
-      }
-    }
-    &.et-animation-leave-active {
-      transition: transform 150ms var(--ease-in-5);
-    }
-  }
-  &.et-overlay--left-sheet {
-    left: -50px;
-    padding-left: 50px;
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translateX(-100%) !important;
-    }
-    &.et-animation-enter-active {
-      transition: transform 300ms var(--ease-out-5);
-      @supports (transition-timing-function: linear(0, 1)) {
-        transition: transform 300ms var(--ease-spring-1);
-      }
-    }
-    &.et-animation-leave-active {
-      transition: transform 150ms var(--ease-in-5);
-    }
-  }
-  &.et-overlay--right-sheet {
-    right: -50px;
-    padding-right: 50px;
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translateX(100%) !important;
-    }
-    &.et-animation-enter-active {
-      transition: transform 300ms var(--ease-out-5);
-      @supports (transition-timing-function: linear(0, 1)) {
-        transition: transform 300ms var(--ease-spring-1);
-      }
-    }
-    &.et-animation-leave-active {
-      transition: transform 150ms var(--ease-in-5);
-    }
-  }
-  &.et-overlay--dialog {
-    &.et-animation-enter-from {
-      opacity: 0 !important;
-      transform: scale(0.85) !important;
-    }
-    &.et-animation-leave-to {
-      opacity: 0 !important;
-      transform: scale(0.7) !important;
-    }
-    &.et-animation-enter-active {
-      transition:
-        transform 300ms var(--ease-out-5),
-        opacity 300ms var(--ease-out-5);
-      @supports (transition-timing-function: linear(0, 1)) {
-        transition:
-          transform 300ms var(--ease-spring-2),
-          opacity 300ms var(--ease-out-5);
-      }
-    }
-    &.et-animation-leave-active {
-      transition:
-        transform 150ms var(--ease-out-5),
-        opacity 150ms var(--ease-out-5);
-    }
-  }
-}

package/src/lib/components/overlay/components/overlay/components/overlay-container/overlay-container.component.ts DELETED Viewed

@@ -1,349 +0,0 @@
-import { FocusMonitor, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
-import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { OverlayRef as CdkOverlayRef } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, NgZone, ViewEncapsulation, inject } from '@angular/core';
-import {
-  ANIMATED_LIFECYCLE_TOKEN,
-  AnimatedLifecycleDirective,
-  RootBoundaryDirective,
-  elementCanScroll,
-  nextFrame,
-} from '@ethlete/core';
-import { ProvideThemeDirective, THEME_PROVIDER } from '@ethlete/theming';
-import { Subject, fromEvent, merge, takeUntil, tap } from 'rxjs';
-import { SwipeHandlerService } from '../../../../../../services';
-import { SwipeEndEvent, SwipeUpdateEvent } from '../../../../../../types';
-import { OVERLAY_CONFIG } from '../../constants';
-import { OverlayConfig, OverlayDragToDismissConfig } from '../../types';
-import { OverlayRef } from '../../utils';
-const isTouchEvent = (event: Event): event is TouchEvent => {
-  return event.type[0] === 't';
-};
-@Component({
-  selector: 'et-overlay-container',
-  styleUrls: ['./overlay-container.component.scss'],
-  template: `
-    <div class="et-overlay-container-drag-handle"></div>
-    <ng-template cdkPortalOutlet />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'et-overlay',
-    tabindex: '-1',
-    '[attr.aria-modal]': '_config.ariaModal',
-    '[id]': '_config.id',
-    '[attr.role]': '_config.role',
-    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledBy',
-    '[attr.aria-label]': '_config.ariaLabel',
-    '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
-    '[class.et-with-default-animation]': '!_config.customAnimated',
-  },
-  standalone: true,
-  imports: [PortalModule],
-  hostDirectives: [RootBoundaryDirective, AnimatedLifecycleDirective, ProvideThemeDirective],
-})
-export class OverlayContainerComponent extends CdkDialogContainer<OverlayConfig> {
-  private readonly _swipeHandlerService = inject(SwipeHandlerService);
-  private readonly _dragToDismissStop$ = new Subject<void>();
-  readonly _themeProvider = inject(THEME_PROVIDER);
-  private readonly _parentThemeProvider = inject(THEME_PROVIDER, { optional: true, skipSelf: true });
-  readonly _rootBoundary = inject(RootBoundaryDirective);
-  readonly _animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
-  readonly cdkOverlayRef = inject(CdkOverlayRef);
-  overlayRef: OverlayRef | null = null;
-  readonly elementRef = this._elementRef;
-  constructor() {
-    super(
-      inject(ElementRef),
-      inject(FocusTrapFactory),
-      inject(DOCUMENT),
-      inject(OVERLAY_CONFIG),
-      inject(InteractivityChecker),
-      inject(NgZone),
-      inject(CdkOverlayRef),
-      inject(FocusMonitor),
-    );
-    if (this._parentThemeProvider) {
-      this._themeProvider.syncWithProvider(this._parentThemeProvider);
-    }
-  }
-  protected override _contentAttached(): void {
-    super._contentAttached();
-    this._rootBoundary.boundaryElement = this._elementRef.nativeElement;
-    nextFrame(() => {
-      this._animatedLifecycle.enter();
-    });
-  }
-  protected override _captureInitialFocus(): void {
-    if (!this._config.delayFocusTrap) {
-      this._trapFocus();
-    }
-  }
-  protected _openAnimationDone() {
-    if (this._config.delayFocusTrap) {
-      this._trapFocus();
-    }
-  }
-  _enableDragToDismiss(config: OverlayDragToDismissConfig) {
-    if (!this.overlayRef) return;
-    this._dragToDismissStop$.next();
-    const el = this._elementRef.nativeElement as HTMLElement;
-    let swipeId: number | null = null;
-    let isSelectionActive = false;
-    const cancelDrag = () => {
-      el.style.setProperty('transition', 'transform 100ms var(--ease-out-1)');
-      el.style.transform =
-        config.direction === 'to-bottom' || config.direction === 'to-top' ? 'translateY(0)' : 'translateX(0)';
-      swipeId = null;
-      setTimeout(() => {
-        el.style.removeProperty('transition');
-        el.style.removeProperty('transform');
-      }, 100);
-    };
-    merge(fromEvent<TouchEvent>(el, 'touchstart'), fromEvent<MouseEvent>(el, 'mousedown'))
-      .pipe(
-        takeUntil(this._dragToDismissStop$),
-        takeUntil(this.overlayRef.afterClosed()),
-        tap((event) => {
-          if (isSelectionActive) return;
-          const target = event.target as HTMLElement;
-          const tag = target.tagName.toLowerCase();
-          if (tag === 'input' || tag === 'textarea' || tag === 'select' || tag === 'button' || tag === 'a') return;
-          swipeId = this._swipeHandlerService.startSwipe(event);
-        }),
-      )
-      .subscribe();
-    fromEvent<Event>(document, 'selectionchange')
-      .pipe(takeUntil(this._dragToDismissStop$), takeUntil(this.overlayRef.afterClosed()))
-      .subscribe(() => {
-        const selection = document.getSelection();
-        if (!selection || !selection.toString().length) {
-          isSelectionActive = false;
-          return;
-        }
-        isSelectionActive = true;
-        cancelDrag();
-      });
-    merge(fromEvent<TouchEvent>(el, 'touchmove'), fromEvent<MouseEvent>(el, 'mousemove'))
-      .pipe(
-        takeUntil(this._dragToDismissStop$),
-        takeUntil(this.overlayRef.afterClosed()),
-        tap((event) => {
-          if (swipeId === null || isSelectionActive) return;
-          if (isTouchEvent(event)) {
-            const target = event.target as HTMLElement;
-            const recursiveFindScrollableParent = (el: HTMLElement): HTMLElement | null => {
-              if (!el) return null;
-              if (config.direction === 'to-bottom' || config.direction === 'to-top') {
-                if (elementCanScroll(el, 'y')) {
-                  return el;
-                }
-              } else {
-                if (elementCanScroll(el, 'x')) {
-                  return el;
-                }
-              }
-              if (!el.parentElement || el.tagName.toLowerCase() === 'et-overlay-container') return null;
-              return recursiveFindScrollableParent(el.parentElement);
-            };
-            const scrollableElement = recursiveFindScrollableParent(target);
-            if (scrollableElement) {
-              let cancel = false;
-              if (config.direction === 'to-bottom') {
-                if (scrollableElement.scrollTop !== 0) {
-                  cancel = true;
-                }
-              } else if (config.direction === 'to-top') {
-                if (
-                  Math.round(scrollableElement.scrollTop) !==
-                  scrollableElement.scrollHeight - scrollableElement.clientHeight
-                ) {
-                  cancel = true;
-                }
-              } else if (config.direction === 'to-right') {
-                if (scrollableElement.scrollLeft !== 0) {
-                  cancel = true;
-                }
-              } else {
-                if (
-                  Math.round(scrollableElement.scrollLeft) !==
-                  scrollableElement.scrollWidth - scrollableElement.clientWidth
-                ) {
-                  cancel = true;
-                }
-              }
-              if (cancel) {
-                cancelDrag();
-                return;
-              }
-            }
-          }
-          const swipeData = this._swipeHandlerService.updateSwipe(swipeId, event);
-          if (!swipeData) return;
-          const css = this._defaultSwipeMoveStyleInterpolator(swipeData, config);
-          Object.entries(css).forEach(([key, value]) => {
-            el.style.setProperty(key, value);
-          });
-        }),
-      )
-      .subscribe();
-    merge(fromEvent<TouchEvent>(el, 'touchend'), fromEvent<MouseEvent>(el, 'mouseup'))
-      .pipe(
-        takeUntil(this._dragToDismissStop$),
-        takeUntil(this.overlayRef.afterClosed()),
-        tap(() => {
-          if (swipeId === null || isSelectionActive) return;
-          const swipeData = this._swipeHandlerService.endSwipe(swipeId);
-          swipeId = null;
-          if (!swipeData) return;
-          const css = this._defaultSwipeEndStyleInterpolator(swipeData, config);
-          if (!css) {
-            this.overlayRef?._closeOverlayVia('touch');
-            return;
-          }
-          Object.entries(css).forEach(([key, value]) => {
-            if (key === 'cleanUp') {
-              if (typeof value === 'string' || !value) return;
-              setTimeout(() => {
-                value.fn(el);
-              }, value.delay);
-              return;
-            }
-            el.style.setProperty(key, value as string);
-          });
-        }),
-      )
-      .subscribe();
-  }
-  _disableDragToDismiss() {
-    this._dragToDismissStop$.next();
-  }
-  private _defaultSwipeMoveStyleInterpolator(event: SwipeUpdateEvent, config: OverlayDragToDismissConfig) {
-    const { direction } = config;
-    const { movementX, movementY } = event;
-    if (direction === 'to-bottom') {
-      return {
-        transform: `translateY(${movementY < 0 ? 0 : movementY}px)`,
-      };
-    } else if (direction === 'to-top') {
-      return {
-        transform: `translateY(${movementY > 0 ? 0 : movementY}px)`,
-      };
-    } else if (direction === 'to-left') {
-      return {
-        transform: `translateX(${movementX > 0 ? 0 : movementX}px)`,
-      };
-    } else {
-      return {
-        transform: `translateX(${movementX < 0 ? 0 : movementX}px)`,
-      };
-    }
-  }
-  private _defaultSwipeEndStyleInterpolator(event: SwipeEndEvent, config: OverlayDragToDismissConfig) {
-    const { direction, minDistanceToDismiss = 150, minVelocityToDismiss = 150 } = config;
-    const { movementX, movementY, pixelPerSecondX, pixelPerSecondY } = event;
-    const cleanUp = {
-      delay: 100,
-      fn: (el: HTMLElement) => el.style.removeProperty('transition'),
-    };
-    if (direction === 'to-bottom') {
-      if (movementY < minDistanceToDismiss && pixelPerSecondY < minVelocityToDismiss) {
-        return {
-          transform: `translateY(0)`,
-          transition: 'transform 100ms var(--ease-out-1)',
-          cleanUp: movementY ? cleanUp : undefined,
-        };
-      } else {
-        return null;
-      }
-    }
-    if (direction === 'to-top') {
-      if (movementY > -minDistanceToDismiss && pixelPerSecondY > -minVelocityToDismiss) {
-        return {
-          transform: `translateY(0)`,
-          transition: 'transform 100ms var(--ease-out-1)',
-          cleanUp: movementY ? cleanUp : undefined,
-        };
-      } else {
-        return null;
-      }
-    } else if (direction === 'to-left') {
-      if (movementX > -minDistanceToDismiss && pixelPerSecondX > -minVelocityToDismiss) {
-        return {
-          transform: `translateX(0)`,
-          transition: 'transform 100ms var(--ease-out-1)',
-          cleanUp: movementX ? cleanUp : undefined,
-        };
-      } else {
-        return null;
-      }
-    } else {
-      if (movementX < minDistanceToDismiss && pixelPerSecondX < minVelocityToDismiss) {
-        return {
-          transform: `translateX(0)`,
-          transition: 'transform 100ms var(--ease-out-1)',
-          cleanUp: movementX ? cleanUp : undefined,
-        };
-      } else {
-        return null;
-      }
-    }
-  }
-}