@ethlete/cdk 4.11.1 → 4.13.0

package/fesm2022/ethlete-cdk.mjs

@@ -1,8 +1,8 @@
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { AsyncPipe, NgClass, NgTemplateOutlet, JsonPipe, NgComponentOutlet, DOCUMENT } from '@angular/common';
+import { AsyncPipe, NgClass, NgTemplateOutlet, JsonPipe, NgComponentOutlet, DOCUMENT, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, numberAttribute, signal, input, EventEmitter, Output, computed, ViewChildren, Optional, Inject, SkipSelf, HostListener, effect, NgZone, NgModule, isSignal, viewChild, contentChild, assertInInjectionContext, Pipe, Attribute } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, numberAttribute, signal, input, EventEmitter, Output, computed, ViewChildren, Optional, Inject, SkipSelf, HostListener, effect, NgZone, NgModule, isSignal, DestroyRef, viewChild, contentChild, assertInInjectionContext, Pipe, Attribute } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
 import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, createComponentId, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, nextFrame, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, signalElementScrollState, signalElementIntersection, signalElementChildren, signalHostElementDimensions, signalHostStyles, isElementVisible, getFirstAndLastPartialIntersection, CursorDragScrollDirective, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, fromNextFrame, ViewportService, ROOT_BOUNDARY_TOKEN, AnimatedIfDirective, syncSignal, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, filter, Subject, Observable, debounceTime, withLatestFrom, distinctUntilChanged, take, merge, skipUntil, skipWhile, catchError, throwError, fromEvent, timer, defer, partition, from, finalize, Subscription } from 'rxjs';
@@ -26,8 +26,8 @@ import { ViewportRuler, STANDARD_DROPDOWN_BELOW_POSITIONS, Overlay, OverlayConfi
 import { coerceBooleanProperty, coerceCssPixelValue, coerceElement, _isNumberValue } from '@angular/cdk/coercion';
 import { startWith as startWith$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, takeUntil as takeUntil$1, skip as skip$1, filter as filter$1, mergeMap, mapTo, mergeAll, switchMap as switchMap$1, take as take$1 } from 'rxjs/operators';
 import { UniqueSelectionDispatcher, _VIEW_REPEATER_STRATEGY, _DisposeViewRepeaterStrategy, _RecycleViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
-import { Title } from '@angular/platform-browser';
 import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
+import { Title } from '@angular/platform-browser';
 import * as i1$3 from '@angular/cdk/table';
 import { CdkColumnDef, CDK_TABLE, CdkTable, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, STICKY_POSITIONING_LISTENER, HeaderRowOutlet, DataRowOutlet, NoDataRowOutlet, FooterRowOutlet, CdkCell, CdkCellDef, CdkFooterCell, CdkFooterCellDef, CdkHeaderCell, CdkHeaderCellDef, CdkTextColumn, TEXT_COLUMN_OPTIONS, CdkFooterRow, CdkTableModule, CDK_ROW_TEMPLATE, CdkFooterRowDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef } from '@angular/cdk/table';
 import * as i1$4 from '@angular/cdk/scrolling';
@@ -4015,6 +4015,7 @@ class OverlayRef {
     }
     constructor(_ref, config, _containerInstance) {
         this._ref = _ref;
+        this.config = config;
         this._containerInstance = _containerInstance;
         this.componentInstance = null;
         this.componentRef = null;
@@ -11534,7 +11535,7 @@ class OverlayPositionBuilder {
                 config: this.mergeConfigs(this.DEFAULTS.bottomSheet, customConfig?.bottomSheet ?? {}),
             },
             {
-                breakpoint: 'md',
+                breakpoint: customConfig?.breakpoint ?? 'md',
                 config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig?.dialog ?? {}),
             },
         ];
@@ -11546,7 +11547,7 @@ class OverlayPositionBuilder {
                 config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig?.fullScreenDialog ?? {}),
             },
             {
-                breakpoint: 'md',
+                breakpoint: customConfig?.breakpoint ?? 'md',
                 config: this.mergeConfigs(this.DEFAULTS.rightSheet, customConfig?.rightSheet ?? {}),
             },
         ];
@@ -11558,7 +11559,7 @@ class OverlayPositionBuilder {
                 config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig?.fullScreenDialog ?? {}),
             },
             {
-                breakpoint: 'md',
+                breakpoint: customConfig?.breakpoint ?? 'md',
                 config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig?.dialog ?? {}),
             },
         ];
@@ -11626,15 +11627,18 @@ class OverlayPositionBuilder {
 const OVERLAY_ROUTER_CONFIG_TOKEN = new InjectionToken('OVERLAY_ROUTER_CONFIG_TOKEN');
 class OverlayRouterService {
     constructor() {
-        this.config = inject(OVERLAY_ROUTER_CONFIG_TOKEN);
-        this.syncCurrentRoute = signal('/');
+        this._router = inject(Router);
+        this._routerStateService = inject(RouterStateService);
+        this._id = createComponentId('ovr');
+        this._overlayRef = inject(OverlayRef);
+        this._config = inject(OVERLAY_ROUTER_CONFIG_TOKEN);
+        this._syncCurrentRoute = signal(this._getInitialRoute());
+        this._nativeBrowserTempBackNavigationStack = signal([]);
         // The current route, but delayed by one frame to ensure that the needed animation classes are applied.
-        this.currentRoute = toSignal(toObservable(this.syncCurrentRoute).pipe(switchMap((r) => fromNextFrame().pipe(map(() => r)))), { initialValue: '/' });
-        this.routeHistory = signal([]);
-        this.rootHistoryItem = signal(null);
+        this.currentRoute = toSignal(toObservable(this._syncCurrentRoute).pipe(switchMap((r) => fromNextFrame().pipe(map(() => r)))), { initialValue: this._getInitialRoute() });
         this.extraRoutes = signal([]);
         this.routes = computed(() => {
-            const allRoutes = [...this.config.routes, ...this.extraRoutes()];
+            const allRoutes = [...this._config.routes, ...this.extraRoutes()];
             const allRoundsWithTransformedInputs = allRoutes.map((route) => {
                 return {
                     ...route,
@@ -11652,7 +11656,7 @@ class OverlayRouterService {
             return allRoundsWithTransformedInputs;
         });
         this.currentPage = computed(() => {
-            const currentRoute = this.syncCurrentRoute();
+            const currentRoute = this._syncCurrentRoute();
             for (const route of this.routes()) {
                 if (route.path === currentRoute) {
                     return route;
@@ -11660,22 +11664,57 @@ class OverlayRouterService {
             }
             return null;
         });
-        this.lastPage = computed(() => {
-            const history = this.routeHistory();
-            if (history.length) {
-                return history[history.length - 1];
+        this.navigationDirection = signal('forward');
+        this._disableCloseOnNavigation();
+        this._updateBrowserUrl(this._syncCurrentRoute());
+        this._routerStateService
+            .selectQueryParam(this._id)
+            .pipe(takeUntilDestroyed(), skip(1), tap((route) => {
+            // The user navigated back or forward using the browser history
+            if (!route) {
+                // The route query param no longer exists - close the overlay
+                this._overlayRef.close();
+            }
+            else if (route !== this._syncCurrentRoute()) {
+                const navStack = this._nativeBrowserTempBackNavigationStack();
+                const currentRoute = this._syncCurrentRoute();
+                if (!navStack.length) {
+                    // If the nav stack is empty the only way to navigate is back.
+                    this.navigate(route, { navigationDirection: 'backward' });
+                    this._nativeBrowserTempBackNavigationStack.set([currentRoute]);
+                }
+                else {
+                    const lastItem = navStack[navStack.length - 1];
+                    if (route === lastItem) {
+                        // The new route matches the last item in the back nav stack.
+                        // This means we are going forward again.
+                        this.navigate(route, { navigationDirection: 'forward' });
+                        this._nativeBrowserTempBackNavigationStack.set(navStack.slice(0, -1));
+                    }
+                    else {
+                        // Else we are going back.
+                        this.navigate(route, { navigationDirection: 'backward' });
+                        this._nativeBrowserTempBackNavigationStack.set([...navStack, currentRoute]);
+                    }
+                }
             }
-            return null;
-        });
-        this.canGoBack = computed(() => {
-            return this.routeHistory().length;
+            else {
+                // The navigation was triggered by ui interaction. Clear the back nav stack.
+                this._nativeBrowserTempBackNavigationStack.set([]);
+            }
+        }))
+            .subscribe();
+        inject(DestroyRef).onDestroy(() => {
+            // Remove the dialog route from the browser url
+            this._updateBrowserUrl(undefined);
         });
-        this.navigationDirection = signal('forward');
-        this._navigateToInitialRoute();
     }
-    navigate(route) {
+    navigate(route, config) {
         const resolvedRoute = this.resolvePath(route);
-        if (resolvedRoute.type === 'back') {
+        if (config?.navigationDirection) {
+            this.navigationDirection.set(config.navigationDirection);
+        }
+        else if (resolvedRoute.type === 'back') {
             this.navigationDirection.set('backward');
         }
         else {
@@ -11683,14 +11722,6 @@ class OverlayRouterService {
         }
         this._updateCurrentRoute(resolvedRoute.route);
     }
-    back() {
-        const prevRoute = this.lastPage();
-        if (!prevRoute)
-            return;
-        this.navigationDirection.set('backward');
-        this.routeHistory.set(this.routeHistory().slice(0, -1));
-        this._updateCurrentRoute(prevRoute, { updateHistory: false });
-    }
     resolvePath(route) {
         if (Array.isArray(route)) {
             route = route.join('/');
@@ -11702,7 +11733,7 @@ class OverlayRouterService {
         const isReplaceCurrent = route.startsWith('./');
         const isBack = route.startsWith('../');
         const isForward = !isAbsolute && !isReplaceCurrent && !isBack;
-        const curr = this.syncCurrentRoute();
+        const curr = this._syncCurrentRoute();
         if (isForward) {
             route = `${curr}/${route}`;
         }
@@ -11740,64 +11771,30 @@ class OverlayRouterService {
     removeRoute(path) {
         this.extraRoutes.set(this.extraRoutes().filter((r) => r.path !== path));
     }
-    _updateCurrentRoute(route, config) {
-        console.log('from', this.syncCurrentRoute(), 'to', route, 'with config', config);
-        if (route === this.syncCurrentRoute())
+    _updateCurrentRoute(route) {
+        if (route === this._syncCurrentRoute())
             return;
         if (this.routes().findIndex((r) => r.path === route) === -1) {
-            console.error(`The route "${route}" does not exist.`, this.config);
+            console.error(`The route "${route}" does not exist.`, this._config);
             return;
         }
-        const lastRoute = this.syncCurrentRoute();
-        if (config?.updateHistory === true || config?.updateHistory === undefined) {
-            const history = this.routeHistory();
-            if (history[history.length - 1] !== lastRoute) {
-                const newHistory = [...history, lastRoute];
-                // limit the history to 25 items
-                if (newHistory.length > 25) {
-                    newHistory.shift();
-                }
-                const rootHistoryItem = this.rootHistoryItem();
-                if (rootHistoryItem && newHistory[0] !== rootHistoryItem) {
-                    newHistory.unshift(rootHistoryItem);
-                }
-                this.routeHistory.set(newHistory);
-            }
-        }
-        this.syncCurrentRoute.set(route);
+        this._syncCurrentRoute.set(route);
+        this._updateBrowserUrl(route);
     }
-    _removeItemFromHistory(item) {
-        const history = this.routeHistory();
-        const cleanedHistory = history.filter((i) => i !== item);
-        console.log({
-            history,
-            cleanedHistory,
-            len: cleanedHistory.length,
-            null: cleanedHistory[0],
-            curr: this.syncCurrentRoute(),
-        });
-        if (cleanedHistory.length === 1 && cleanedHistory[0] === this.syncCurrentRoute()) {
-            this.routeHistory.set([]);
-        }
-        else {
-            this.routeHistory.set(cleanedHistory);
-        }
+    _getInitialRoute() {
+        return this._config.initialRoute ?? this._config.routes[0]?.path ?? '/';
     }
     _navigateToInitialRoute() {
-        if (this.config.initialRoute) {
-            this._updateCurrentRoute(this.config.initialRoute ?? '/', { updateHistory: false });
-        }
-        else {
-            const first = this.config.routes[0]?.path;
-            this._updateCurrentRoute(first ?? '/', { updateHistory: false });
-        }
+        this._updateCurrentRoute(this._getInitialRoute());
+    }
+    _updateBrowserUrl(route) {
+        this._router.navigate(['.'], { queryParams: { [this._id]: route }, queryParamsHandling: 'merge' });
+    }
+    _disableCloseOnNavigation() {
+        // @ts-expect-error - private property
+        this._overlayRef._cdkRef.overlayRef._locationChanges?.unsubscribe?.();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlayRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlayRouterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlayRouterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
 const provideOverlayRouterConfig = (config) => {
     return [
         {
@@ -11912,7 +11909,6 @@ class OverlayService {
                     { provide: RootBoundaryDirective, useValue: container._rootBoundary },
                     { provide: OVERLAY_DATA, useValue: cdkConfig.data },
                     { provide: OverlayRef, useValue: overlayRef },
-                    { provide: OverlayRef, useValue: overlayRef },
                     ...(composedConfig.providers ?? []),
                 ];
             },
@@ -12368,14 +12364,10 @@ class SidebarOverlayService {
             .pipe(distinctUntilChanged(), tap((renderSidebar) => {
             if (renderSidebar) {
                 this.router.removeRoute(sidebarPageRoute);
-                this.router.rootHistoryItem.set(null);
                 // if the user is currently on the sidebar route, navigate to the initial route.
                 if (this.router.currentRoute() === sidebarPageRoute) {
                     this.router._navigateToInitialRoute();
                 }
-                // clean up all history entries that are the sidebar route.
-                // we don't want to navigate to the sidebar route if the sidebar is already visible as a actual sidebar.
-                this.router._removeItemFromHistory(sidebarPageRoute);
             }
             else {
                 this.router.addRoute({
@@ -12386,18 +12378,11 @@ class SidebarOverlayService {
                         bodyTemplate: this.sidebarContentTemplate,
                     },
                 });
-                // ensure that the sidebar route is always the last route in the history so it can be reached.
-                this.router.rootHistoryItem.set(sidebarPageRoute);
             }
         }), takeUntilDestroyed())
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SidebarOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SidebarOverlayService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SidebarOverlayService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
 const provideSidebarOverlayConfig = (config) => {
     return [
         {
@@ -12411,22 +12396,12 @@ const provideSidebarOverlayConfig = (config) => {
 const OVERLAY_BACK_OR_CLOSE_TOKEN = new InjectionToken('OVERLAY_BACK_OR_CLOSE_TOKEN');
 class OverlayBackOrCloseDirective {
     constructor() {
+        this.locationService = inject(Location);
         this.overlayRef = inject(OverlayRef);
         this.router = inject(OverlayRouterService);
         this.disabled = input(false, { transform: booleanAttribute });
-        this.hostClassBindings = signalHostClasses({
-            'et-overlay-back-or-close--is-back': this.router.canGoBack,
-            'et-overlay-back-or-close--is-close': computed(() => !this.router.canGoBack()),
-        });
         fromEvent(inject(ElementRef).nativeElement, 'click')
-            .pipe(filter(() => !this.disabled()), tap(() => {
-            if (this.router.canGoBack()) {
-                this.router.back();
-            }
-            else {
-                this.overlayRef.close();
-            }
-        }), takeUntilDestroyed())
+            .pipe(filter(() => !this.disabled()), tap(() => this.locationService.back()), takeUntilDestroyed())
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlayBackOrCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -12641,15 +12616,16 @@ class OverlayRouterLinkDirective {
         this.router = inject(OverlayRouterService);
         this.path = input.required({ alias: 'etOverlayRouterLink' });
         this.disabled = input(false, { transform: booleanAttribute });
+        this.navigationDirection = input(null);
         this.hostClassBindings = signalHostClasses({
             'et-overlay-router-link--active': computed(() => this.router.resolvePath(this.path()).route === this.router.currentRoute()),
         });
         fromEvent(inject(ElementRef).nativeElement, 'click')
-            .pipe(filter(() => !this.disabled()), tap(() => this.router.navigate(this.path())), takeUntilDestroyed())
+            .pipe(filter(() => !this.disabled()), tap(() => this.router.navigate(this.path(), { navigationDirection: this.navigationDirection() ?? undefined })), takeUntilDestroyed())
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: OverlayRouterLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.1", type: OverlayRouterLinkDirective, isStandalone: true, selector: "[etOverlayRouterLink]", inputs: { path: { classPropertyName: "path", publicName: "etOverlayRouterLink", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, classAttribute: "et-overlay-router-link" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.1", type: OverlayRouterLinkDirective, isStandalone: true, selector: "[etOverlayRouterLink]", inputs: { path: { classPropertyName: "path", publicName: "etOverlayRouterLink", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, navigationDirection: { classPropertyName: "navigationDirection", publicName: "navigationDirection", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, classAttribute: "et-overlay-router-link" }, providers: [
             {
                 provide: OVERLAY_ROUTER_LINK_TOKEN,
                 useExisting: OverlayRouterLinkDirective,