@ethlete/cdk 4.27.3 → 4.28.0

package/src/lib/components/overlay/components/overlay/partials/overlay-router-outlet/overlay-router-outlet.component.scss

@@ -0,0 +1,184 @@
+.et-overlay-router-outlet-host {
+  --_et-overlay-router-transition-easing: var(--ease-in-out-4);
+
+  &.et-overlay-router-outlet-transition--none {
+    .et-overlay-router-outlet-page {
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        opacity: 0;
+      }
+
+      &.et-animation-enter-active,
+      &.et-animation-leave-active {
+        transition: opacity 0ms linear;
+      }
+    }
+  }
+
+  &.et-overlay-router-outlet-transition--fade {
+    .et-overlay-router-outlet-page {
+      &.et-animation-enter-from {
+        opacity: 0;
+      }
+
+      &.et-animation-leave-to {
+        opacity: 0;
+      }
+
+      &.et-animation-enter-active,
+      &.et-animation-leave-active {
+        transition: opacity 100ms linear;
+      }
+    }
+  }
+
+  &.et-overlay-router-outlet-transition--slide {
+    --_et-overlay-router-transform-from: translateX(100%);
+    --_et-overlay-router-transform-to: translateX(-100%);
+
+    &.et-overlay-router-outlet-nav-dir--backward {
+      --_et-overlay-router-transform-from: translateX(-100%);
+      --_et-overlay-router-transform-to: translateX(100%);
+    }
+
+    .et-overlay-router-outlet-page {
+      &.et-animation-enter-from {
+        transform: var(--_et-overlay-router-transform-from);
+        opacity: 0;
+      }
+
+      &.et-animation-leave-to {
+        transform: var(--_et-overlay-router-transform-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);
+      }
+    }
+  }
+
+  &.et-overlay-router-outlet-transition--overlay {
+    --_et-overlay-router-transform-from: translateX(100%);
+    --_et-overlay-router-transform-to: translateX(-20%);
+    --_et-overlay-router-out-page-brightness: 0.8;
+
+    &.et-overlay-router-outlet-nav-dir--backward {
+      --_et-overlay-router-transform-from: translateX(-20%);
+      --_et-overlay-router-transform-to: translateX(100%);
+
+      .et-overlay-router-outlet-page {
+        &.et-animation-enter-from {
+          filter: brightness(var(--_et-overlay-router-out-page-brightness));
+        }
+        &.et-animation-leave-to {
+          filter: brightness(1);
+        }
+        &.et-animation-enter-active {
+          z-index: 0;
+        }
+
+        &.et-animation-leave-active {
+          z-index: 1;
+        }
+      }
+    }
+
+    .et-overlay-router-outlet-page {
+      &.et-animation-enter-from {
+        transform: var(--_et-overlay-router-transform-from);
+      }
+
+      &.et-animation-leave-to {
+        filter: brightness(var(--_et-overlay-router-out-page-brightness));
+        transform: var(--_et-overlay-router-transform-to);
+      }
+
+      &.et-animation-enter-active {
+        z-index: 1;
+      }
+
+      &.et-animation-enter-active,
+      &.et-animation-leave-active {
+        transition:
+          transform 225ms var(--_et-overlay-router-transition-easing),
+          filter 225ms var(--_et-overlay-router-transition-easing);
+      }
+    }
+  }
+
+  &.et-overlay-router-outlet-transition--vertical {
+    --_et-overlay-router-transform-from: translateY(20%);
+    --_et-overlay-router-transform-to: translateY(-20%);
+    --_et-overlay-router-out-page-brightness: 0.8;
+
+    &.et-overlay-router-outlet-nav-dir--backward {
+      --_et-overlay-router-transform-from: translateY(-20%);
+      --_et-overlay-router-transform-to: translateY(20%);
+
+      .et-overlay-router-outlet-page {
+        &.et-animation-enter-from {
+          filter: brightness(var(--_et-overlay-router-out-page-brightness));
+        }
+        &.et-animation-leave-to {
+          filter: brightness(1);
+        }
+        &.et-animation-enter-active {
+          z-index: 0;
+        }
+
+        &.et-animation-leave-active {
+          z-index: 1;
+        }
+      }
+    }
+
+    .et-overlay-router-outlet-page {
+      &.et-animation-enter-from {
+        transform: var(--_et-overlay-router-transform-from);
+        opacity: 0;
+      }
+
+      &.et-animation-leave-to {
+        filter: brightness(var(--_et-overlay-router-out-page-brightness));
+        transform: var(--_et-overlay-router-transform-to);
+        opacity: 0;
+      }
+
+      &.et-animation-enter-active {
+        z-index: 1;
+      }
+
+      &.et-animation-enter-active,
+      &.et-animation-leave-active {
+        transition:
+          transform 225ms var(--_et-overlay-router-transition-easing),
+          filter 225ms var(--_et-overlay-router-transition-easing),
+          opacity 225ms var(--_et-overlay-router-transition-easing);
+      }
+    }
+  }
+}
+
+.et-overlay-router-outlet {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.et-overlay-router-outlet-page {
+  grid-area: 1 / 1 / 2 / 2;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+.et-overlay-router-outlet-disabled-page {
+  position: relative;
+}

package/src/lib/components/overlay/components/overlay/partials/overlay-router-outlet/overlay-router-outlet.component.ts

@@ -0,0 +1,144 @@
+import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  InjectionToken,
+  TemplateRef,
+  ViewEncapsulation,
+  booleanAttribute,
+  computed,
+  contentChild,
+  inject,
+  input,
+  signal,
+  viewChildren,
+} from '@angular/core';
+import {
+  AnimatedIfDirective,
+  AnimatedLifecycleDirective,
+  AnimatedLifecycleState,
+  signalHostClasses,
+} from '@ethlete/core';
+import { OverlayRouterService, SidebarOverlayService } from '../../utils';
+import { OverlayMainDirective } from '../overlay-main';
+import { OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN } from '../overlay-router-outlet-disabled-template';
+import { OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN } from '../overlay-shared-route-template';
+
+export const OVERLAY_ROUTER_OUTLET_TOKEN = new InjectionToken<OverlayRouterOutletComponent>(
+  'OVERLAY_ROUTER_OUTLET_TOKEN',
+);
+
+@Component({
+  selector: 'et-overlay-router-outlet',
+  template: `
+    <ng-template>
+      <ng-content />
+    </ng-template>
+
+    <div class="et-overlay-router-outlet">
+      @for (page of router.routes(); track page.path) {
+        <div
+          #pageWrapper
+          [class.et-overlay-router-outlet-page--active]="page === router.currentPage()"
+          class="et-overlay-router-outlet-page"
+          etAnimatedLifecycle
+        >
+          <ng-container *etAnimatedIf="page === router.currentPage() && !disabled()">
+            <ng-container *ngComponentOutlet="page.component; inputs: page.inputs" />
+          </ng-container>
+        </div>
+      }
+
+      @if (outletDisabledTemplate()) {
+        <div
+          (stateChange)="disabledPageAnimationStateChange($event)"
+          class="et-overlay-router-outlet-page et-overlay-router-outlet-page--active"
+          etAnimatedLifecycle
+        >
+          <div *etAnimatedIf="disabled()" [etOverlayMain]="hasSidebar" class="et-overlay-router-outlet-disabled-page">
+            <ng-container *ngTemplateOutlet="outletDisabledTemplate()!" />
+          </div>
+        </div>
+      }
+    </div>
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-overlay-router-outlet-host',
+  },
+  styleUrl: './overlay-router-outlet.component.scss',
+  imports: [AnimatedIfDirective, AnimatedLifecycleDirective, NgComponentOutlet, NgTemplateOutlet, OverlayMainDirective],
+  providers: [
+    {
+      provide: OVERLAY_ROUTER_OUTLET_TOKEN,
+      useExisting: OverlayRouterOutletComponent,
+    },
+  ],
+})
+export class OverlayRouterOutletComponent {
+  readonly hasSidebar = !!inject(SidebarOverlayService, { optional: true });
+
+  router = inject(OverlayRouterService);
+
+  sharedRouteTemplate = contentChild(OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, { read: TemplateRef });
+  outletDisabledTemplate = contentChild(OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, { read: TemplateRef });
+
+  pageWrappers = viewChildren<ElementRef<HTMLElement>>('pageWrapper');
+
+  disabled = input(false, { transform: booleanAttribute });
+  wasDisabled = signal(false);
+
+  // We need to keep track of the disabled state until the exit animation is finished.
+  // Otherwise, a wrong animation will be played when the disabled state is toggled off.
+  keepDisabledTransition = computed(() => this.wasDisabled() || this.disabled());
+
+  activePageElement = computed(() => {
+    const wrappers = this.pageWrappers();
+    const currentPage = this.router.currentPage();
+    const currentPageIndex = this.router.routes().findIndex((r) => r.path === currentPage?.path);
+
+    return wrappers[currentPageIndex]?.nativeElement ?? null;
+  });
+
+  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'),
+    'et-overlay-router-outlet-transition--slide': computed(
+      () => this.router.transitionType() === 'slide' && !this.keepDisabledTransition(),
+    ),
+    'et-overlay-router-outlet-transition--fade': computed(
+      () =>
+        this.router.transitionType() === 'fade' ||
+        (this.keepDisabledTransition() && this.router.transitionType() !== 'none'),
+    ),
+    'et-overlay-router-outlet-transition--overlay': computed(
+      () => this.router.transitionType() === 'overlay' && !this.keepDisabledTransition(),
+    ),
+    'et-overlay-router-outlet-transition--vertical': computed(
+      () => this.router.transitionType() === 'vertical' && !this.keepDisabledTransition(),
+    ),
+    'et-overlay-router-outlet-transition--none': computed(() => this.router.transitionType() === 'none'),
+    'et-overlay-router-outlet--disabled': this.disabled,
+    'et-overlay-router-outlet--has-disabled-template': this.outletDisabledTemplate,
+    'et-overlay-router-outlet--has-shared-route-template': this.sharedRouteTemplate,
+  });
+
+  scrollActivePageTo(options?: ScrollToOptions | undefined) {
+    const activePage = this.activePageElement();
+
+    if (activePage) {
+      activePage.scroll(options);
+    }
+  }
+
+  disabledPageAnimationStateChange(state: AnimatedLifecycleState) {
+    if (state === 'entered') {
+      this.wasDisabled.set(true);
+    } else if (state === 'left') {
+      this.wasDisabled.set(false);
+    }
+  }
+}

package/src/lib/components/overlay/components/overlay/partials/overlay-router-outlet-disabled-template/overlay-router-outlet-disabled-template.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, InjectionToken } from '@angular/core';
+
+export const OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN =
+  new InjectionToken<OverlayRouterOutletDisabledTemplateDirective>('OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN');
+
+@Directive({
+  selector: 'ng-template[etOverlayRouterOutletDisabledTemplate]',
+  standalone: true,
+  providers: [
+    {
+      provide: OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN,
+      useExisting: OverlayRouterOutletDisabledTemplateDirective,
+    },
+  ],
+})
+export class OverlayRouterOutletDisabledTemplateDirective {}

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

@@ -0,0 +1,17 @@
+import { Directive, InjectionToken } from '@angular/core';
+
+export const OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN = new InjectionToken<OverlaySharedRouteTemplateDirective>(
+  'OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN',
+);
+
+@Directive({
+  selector: 'ng-template[etOverlaySharedRouteTemplate]',
+  standalone: true,
+  providers: [
+    {
+      provide: OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN,
+      useExisting: OverlaySharedRouteTemplateDirective,
+    },
+  ],
+})
+export class OverlaySharedRouteTemplateDirective {}

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

@@ -0,0 +1,27 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
+import { OVERLAY_ROUTER_OUTLET_TOKEN } from '../overlay-router-outlet';
+
+@Component({
+  selector: 'et-overlay-shared-route-template-outlet',
+  template: `
+    @if (routerOutlet.sharedRouteTemplate(); as tpl) {
+      <ng-container *ngTemplateOutlet="tpl" />
+    }
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-overlay-shared-route-template-outlet-host',
+  },
+  imports: [NgTemplateOutlet],
+  styles: `
+    .et-overlay-shared-route-template-outlet-host {
+      display: contents;
+    }
+  `,
+})
+export class OverlaySharedRouteTemplateOutletComponent {
+  routerOutlet = inject(OVERLAY_ROUTER_OUTLET_TOKEN);
+}

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

@@ -0,0 +1,52 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  TemplateRef,
+  ViewEncapsulation,
+  contentChild,
+  inject,
+  input,
+  viewChild,
+} from '@angular/core';
+import { signalHostClasses, syncSignal } from '@ethlete/core';
+import { OverlayRouterService, SidebarOverlayService } from '../../utils';
+import { OverlayBodyDividerType } from '../overlay-body';
+import { OVERLAY_HEADER_TEMPLATE_TOKEN } from '../overlay-header-template';
+
+@Component({
+  selector: 'et-overlay-sidebar',
+  template: `
+    <ng-template #sidebarContentTpl>
+      <ng-content />
+    </ng-template>
+
+    @if (sidebar.renderSidebar()) {
+      <ng-container *ngTemplateOutlet="sidebarContent()" />
+    }
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-overlay-sidebar-host',
+  },
+  imports: [NgTemplateOutlet],
+})
+export class OverlaySidebarComponent {
+  sidebarContent = viewChild.required<TemplateRef<unknown>>('sidebarContentTpl');
+  sidebarHeaderContent = contentChild(OVERLAY_HEADER_TEMPLATE_TOKEN);
+  sidebar = inject(SidebarOverlayService);
+  router = inject(OverlayRouterService);
+  pageDividers = input<OverlayBodyDividerType>(false);
+
+  hostClassBindings = signalHostClasses({
+    'et-overlay-sidebar--visible': this.sidebar.renderSidebar,
+  });
+
+  constructor() {
+    syncSignal(this.sidebarContent, this.sidebar.sidebarContentTemplate);
+    syncSignal(this.sidebarHeaderContent, this.sidebar.sidebarHeaderTemplate);
+    syncSignal(this.pageDividers, this.sidebar.sidebarPageDividers);
+  }
+}

package/src/lib/components/overlay/components/overlay/partials/overlay-sidebar-page/overlay-sidebar-page.component.ts

@@ -0,0 +1,34 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, TemplateRef, ViewEncapsulation, input } from '@angular/core';
+import { OverlayBodyComponent, OverlayBodyDividerType } from '../overlay-body';
+import { OverlayHeaderDirective } from '../overlay-header';
+import { OverlayHeaderTemplateDirective } from '../overlay-header-template';
+import { OverlayMainDirective } from '../overlay-main';
+
+@Component({
+  selector: 'et-overlay-sidebar-page',
+  template: `
+    @if (headerTemplate()?.template; as tpl) {
+      <et-overlay-header>
+        <ng-container *ngTemplateOutlet="tpl" />
+      </et-overlay-header>
+    }
+
+    <et-overlay-body [dividers]="pageDividers()">
+      <ng-container *ngTemplateOutlet="bodyTemplate()" />
+    </et-overlay-body>
+  `,
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'et-overlay-sidebar-page-host',
+  },
+  imports: [OverlayHeaderDirective, OverlayBodyComponent, NgTemplateOutlet],
+  hostDirectives: [OverlayMainDirective],
+})
+export class OverlaySidebarPageComponent {
+  headerTemplate = input.required<OverlayHeaderTemplateDirective | null>();
+  bodyTemplate = input.required<TemplateRef<unknown> | null>();
+  pageDividers = input<OverlayBodyDividerType>(false);
+}

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

@@ -0,0 +1,34 @@
+import { Directive, ElementRef, HostBinding, inject, Input, OnInit } from '@angular/core';
+import { OverlayService } from '../../services';
+import { getClosestOverlay, OverlayRef } from '../../utils';
+
+let uniqueId = 0;
+
+@Directive({
+  selector: '[et-overlay-title], [etOverlayTitle]',
+  exportAs: 'etOverlayTitle',
+  standalone: true,
+})
+export class OverlayTitleDirective implements OnInit {
+  private _overlayRef = inject(OverlayRef, { optional: true });
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _overlayService = inject(OverlayService);
+
+  @Input()
+  @HostBinding('attr.id')
+  id = `et-overlay-title-${uniqueId++}`;
+
+  ngOnInit() {
+    if (!this._overlayRef) {
+      const closestRef = getClosestOverlay(this._elementRef, this._overlayService.openOverlays);
+
+      if (!closestRef) {
+        throw Error('No closest ref found');
+      }
+
+      this._overlayRef = closestRef;
+    }
+
+    Promise.resolve().then(() => this._overlayRef?._containerInstance?._ariaLabelledByQueue?.push(this.id));
+  }
+}