@ethlete/cdk 4.30.0 → 4.31.0

package/fesm2022/ethlete-cdk.mjs

@@ -2,9 +2,9 @@ import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 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, input, numberAttribute, computed, signal, contentChildren, viewChild, viewChildren, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, contentChild, effect, untracked, NgZone, NgModule, isSignal, DestroyRef, assertInInjectionContext, Attribute } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, input, numberAttribute, computed, signal, contentChildren, viewChild, viewChildren, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, forwardRef, EventEmitter, Output, ViewChildren, Optional, Inject, SkipSelf, HostListener, contentChild, effect, untracked, NgZone, NgModule, DestroyRef, isSignal, assertInInjectionContext, Attribute } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
-import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, 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, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, controlValueSignal, getFormGroupValue, fromNextFrame, ViewportService, ROOT_BOUNDARY_TOKEN, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, 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, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, RouterStateService, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, controlValueSignal, getFormGroupValue, ViewportService, ROOT_BOUNDARY_TOKEN, fromNextFrame, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, merge, timer, takeWhile, filter, fromEvent, Subject, Observable, debounceTime, withLatestFrom, distinctUntilChanged, take, skipUntil, skipWhile, catchError, throwError, defer, partition, from, finalize, Subscription } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -12142,699 +12142,740 @@ const createOverlayConfig = (globalConfig, localConfig) => ({
     ...(localConfig || {}),
 });
 
-const ET_OVERLAY_LEFT_SHEET_CLASS = 'et-overlay--left-sheet';
-const ET_OVERLAY_RIGHT_SHEET_CLASS = 'et-overlay--right-sheet';
-const ET_OVERLAY_TOP_SHEET_CLASS = 'et-overlay--top-sheet';
-const ET_OVERLAY_BOTTOM_SHEET_CLASS = 'et-overlay--bottom-sheet';
-const ET_OVERLAY_DIALOG_CLASS = 'et-overlay--dialog';
-const ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS = 'et-overlay--full-screen-dialog';
-const ET_OVERLAY_CONFIG_CLASS_KEYS = new Set([
-    'containerClass',
-    'paneClass',
-    'overlayClass',
-    'backdropClass',
-    'documentClass',
-    'bodyClass',
-]);
-const ET_OVERLAY_LAYOUT_CLASSES = new Set([
-    ET_OVERLAY_LEFT_SHEET_CLASS,
-    ET_OVERLAY_RIGHT_SHEET_CLASS,
-    ET_OVERLAY_TOP_SHEET_CLASS,
-    ET_OVERLAY_BOTTOM_SHEET_CLASS,
-    ET_OVERLAY_DIALOG_CLASS,
-    ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS,
-]);
-class OverlayPositionBuilder {
-    constructor() {
-        this._overlay = inject(Overlay);
-        this.DEFAULTS = {
-            dialog: {
-                width: undefined,
-                height: undefined,
-                maxHeight: '80vh',
-                maxWidth: '80vw',
-                minHeight: undefined,
-                minWidth: undefined,
-                containerClass: ET_OVERLAY_DIALOG_CLASS,
-                positionStrategy: () => this._overlay.position().global().centerHorizontally().centerVertically(),
-            },
-            fullScreenDialog: {
-                width: '100%',
-                height: '100%',
-                maxHeight: undefined,
-                maxWidth: undefined,
-                minHeight: undefined,
-                minWidth: undefined,
-                containerClass: ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS,
-                positionStrategy: () => this._overlay.position().global().left('0').top('0').bottom('0').right('0'),
-                documentClass: 'et-overlay--full-screen-dialog-document',
-                applyTransformOrigin: true,
-            },
-            bottomSheet: {
-                width: '100%',
-                height: undefined,
-                maxHeight: 'calc(100% - 72px)',
-                maxWidth: '640px',
-                minHeight: undefined,
-                minWidth: undefined,
-                containerClass: ET_OVERLAY_BOTTOM_SHEET_CLASS,
-                positionStrategy: () => this._overlay.position().global().centerHorizontally().bottom('0'),
-                dragToDismiss: {
-                    direction: 'to-bottom',
-                },
-            },
-            topSheet: {
-                width: '100%',
-                height: undefined,
-                maxHeight: 'calc(100% - 72px)',
-                maxWidth: '640px',
-                minHeight: undefined,
-                minWidth: undefined,
-                containerClass: ET_OVERLAY_TOP_SHEET_CLASS,
-                positionStrategy: () => this._overlay.position().global().centerHorizontally().top('0'),
-                dragToDismiss: {
-                    direction: 'to-top',
-                },
-            },
-            leftSheet: {
-                width: '100%',
-                height: '100%',
-                maxHeight: undefined,
-                maxWidth: '640px',
-                minHeight: undefined,
-                minWidth: undefined,
-                containerClass: ET_OVERLAY_LEFT_SHEET_CLASS,
-                positionStrategy: () => this._overlay.position().global().left('0').centerVertically(),
-                dragToDismiss: {
-                    direction: 'to-left',
-                },
-            },
-            rightSheet: {
-                width: '100%',
-                height: '100%',
-                maxHeight: undefined,
-                maxWidth: '640px',
-                minHeight: undefined,
-                minWidth: undefined,
-                containerClass: ET_OVERLAY_RIGHT_SHEET_CLASS,
-                positionStrategy: () => this._overlay.position().global().right('0').centerVertically(),
-                dragToDismiss: {
-                    direction: 'to-right',
-                },
-            },
-        };
-    }
-    transformingBottomSheetToDialog(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.bottomSheet, customConfig?.bottomSheet ?? {}),
-            },
-            {
-                breakpoint: customConfig?.breakpoint ?? 'md',
-                config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig?.dialog ?? {}),
-            },
-        ];
-        return data;
+let uniqueId$1 = 0;
+const ID_PREFIX = 'et-overlay-';
+const setStyle = (el, style, value) => {
+    if (value === null || value === undefined) {
+        el.style.removeProperty(style);
     }
-    transformingFullScreenDialogToRightSheet(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig?.fullScreenDialog ?? {}),
-            },
-            {
-                breakpoint: customConfig?.breakpoint ?? 'md',
-                config: this.mergeConfigs(this.DEFAULTS.rightSheet, customConfig?.rightSheet ?? {}),
-            },
-        ];
-        return data;
+    else {
+        el.style.setProperty(style, coerceCssPixelValue(value));
     }
-    transformingFullScreenDialogToDialog(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig?.fullScreenDialog ?? {}),
-            },
-            {
-                breakpoint: customConfig?.breakpoint ?? 'md',
-                config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig?.dialog ?? {}),
-            },
-        ];
-        return data;
+};
+const setClass = (el, prevClass, currClass) => {
+    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);
+            }
+        }
     }
-    dialog(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig ?? {}),
-            },
-        ];
-        return data;
+};
+const isHtmlElement = (element) => {
+    return element instanceof HTMLElement;
+};
+const isTouchEvent = (event) => {
+    return event.type[0] === 't';
+};
+const isPointerEvent = (event) => {
+    return event.type[0] === 'c';
+};
+class OverlayService {
+    constructor() {
+        this._destroy$ = createDestroy();
+        this._defaultOptions = inject(OVERLAY_DEFAULT_OPTIONS, { optional: true });
+        this._scrollStrategy = inject(OVERLAY_SCROLL_STRATEGY);
+        this._parentOverlayService = inject(OverlayService, { optional: true, skipSelf: true });
+        this._dialog = inject(Dialog);
+        this._viewportService = inject(ViewportService);
+        this._openOverlaysAtThisLevel = [];
+        this._afterAllClosedAtThisLevel = new Subject();
+        this._afterOpenedAtThisLevel = new Subject();
+        this.positions = new OverlayPositionBuilder();
+        this.afterAllClosed = defer(() => this.openOverlays.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));
     }
-    fullScreenDialog(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig ?? {}),
-            },
-        ];
-        return data;
+    get openOverlays() {
+        return this._parentOverlayService ? this._parentOverlayService.openOverlays : this._openOverlaysAtThisLevel;
     }
-    bottomSheet(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.bottomSheet, customConfig ?? {}),
-            },
-        ];
-        return data;
+    get afterOpened() {
+        return this._parentOverlayService ? this._parentOverlayService.afterOpened : this._afterOpenedAtThisLevel;
     }
-    topSheet(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.topSheet, customConfig ?? {}),
-            },
-        ];
-        return data;
+    ngOnDestroy() {
+        this._closeOverlays(this._openOverlaysAtThisLevel);
+        this._afterAllClosedAtThisLevel.complete();
+        this._afterOpenedAtThisLevel.complete();
     }
-    leftSheet(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.leftSheet, customConfig ?? {}),
+    open(componentOrTemplateRef, config) {
+        let overlayRef;
+        const composedConfig = createOverlayConfig(this._defaultOptions, config);
+        composedConfig.id = composedConfig.id || `${ID_PREFIX}${uniqueId$1++}`;
+        composedConfig.scrollStrategy = composedConfig.scrollStrategy || this._scrollStrategy();
+        const cdkRef = this._dialog.open(componentOrTemplateRef, {
+            ...composedConfig,
+            disableClose: true,
+            closeOnDestroy: false,
+            panelClass: 'et-overlay-pane',
+            container: {
+                type: OverlayContainerComponent,
+                providers: () => [
+                    { provide: OVERLAY_CONFIG, useValue: composedConfig },
+                    { provide: DialogConfig, useValue: composedConfig },
+                ],
             },
-        ];
-        return data;
-    }
-    rightSheet(customConfig) {
-        const data = [
-            {
-                config: this.mergeConfigs(this.DEFAULTS.rightSheet, customConfig ?? {}),
+            templateContext: () => ({ dialogRef: overlayRef }),
+            providers: (ref, cdkConfig, overlayContainer) => {
+                const container = overlayContainer;
+                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 ?? []),
+                ];
             },
-        ];
-        return data;
-    }
-    mergeConfigs(...configs) {
-        const combinedConfig = {};
-        for (const config of configs) {
-            for (const configKey of Object.keys(config)) {
-                const key = configKey;
-                const newConfigValue = config[key];
-                if (ET_OVERLAY_CONFIG_CLASS_KEYS.has(configKey)) {
-                    const existing = combinedConfig[key];
-                    if (existing && Array.isArray(existing)) {
-                        if (Array.isArray(newConfigValue)) {
-                            existing.push(...newConfigValue);
-                        }
-                        else if (typeof newConfigValue === 'string') {
-                            existing.push(newConfigValue);
-                        }
-                        const totalLayoutClassesInExisting = existing.filter((value) => ET_OVERLAY_LAYOUT_CLASSES.has(value)).length;
-                        if (totalLayoutClassesInExisting > 1) {
-                            throw new Error(`Multiple layout classes are not allowed in the same config key: ${key}`);
-                        }
-                    }
-                    else if (typeof newConfigValue === 'string') {
-                        combinedConfig[key] = [newConfigValue];
-                    }
-                    else if (Array.isArray(newConfigValue)) {
-                        combinedConfig[key] = newConfigValue;
-                    }
+        });
+        /* eslint-disable @typescript-eslint/no-non-null-assertion*/
+        overlayRef.componentRef = cdkRef.componentRef;
+        overlayRef.componentInstance = cdkRef.componentInstance;
+        cdkRef.containerInstance.overlayRef = overlayRef;
+        const containerEl = overlayRef._containerInstance.elementRef.nativeElement;
+        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, append) => {
+                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.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.getBoundingClientRect().top
+                            : -1;
+                if (originX !== -1 && originY !== -1 && currConfig.applyTransformOrigin) {
+                    setStyle(containerEl, 'transform-origin', `${originX}px ${originY}px`);
                 }
                 else {
-                    combinedConfig[key] = newConfigValue;
+                    setStyle(containerEl, 'transform-origin', null);
                 }
             }
-        }
-        return combinedConfig;
-    }
-}
-
-const OVERLAY_ROUTER_CONFIG_TOKEN = new InjectionToken('OVERLAY_ROUTER_CONFIG_TOKEN');
-class OverlayRouterService {
-    constructor() {
-        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._getInitialRoute() });
-        this.extraRoutes = signal([]);
-        this.transitionType = signal('slide');
-        this.routes = computed(() => {
-            const allRoutes = [...this._config.routes, ...this.extraRoutes()];
-            const allRoundsWithTransformedInputs = allRoutes.map((route) => {
-                return {
-                    ...route,
-                    inputs: Object.entries(route.inputs ?? {}).reduce((acc, [key, value]) => {
-                        if (isSignal(value)) {
-                            acc[key] = value();
-                        }
-                        else {
-                            acc[key] = value;
-                        }
-                        return acc;
-                    }, {}),
-                };
-            });
-            return allRoundsWithTransformedInputs;
-        });
-        this.currentPage = computed(() => {
-            const currentRoute = this._syncCurrentRoute();
-            for (const route of this.routes()) {
-                if (route.path === currentRoute) {
-                    return route;
+            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);
                 }
-            }
-            return null;
-        });
-        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 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 {
-                    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]);
-                    }
+                    applyDefaultMaxWidths();
                 }
             }
             else {
-                // The navigation was triggered by ui interaction. Clear the back nav stack.
-                this._nativeBrowserTempBackNavigationStack.set([]);
+                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();
-        inject(DestroyRef).onDestroy(() => {
-            // Remove the dialog route from the browser url
-            this._updateBrowserUrl(undefined);
+        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);
+                }
+            }
         });
-    }
-    navigate(route, config) {
-        const resolvedRoute = this.resolvePath(route);
-        if (config?.navigationDirection) {
-            this.navigationDirection.set(config.navigationDirection);
-        }
-        else if (resolvedRoute.type === 'back') {
-            this.navigationDirection.set('backward');
-        }
-        else {
-            this.navigationDirection.set('forward');
-        }
-        this._updateCurrentRoute(resolvedRoute.route);
-    }
-    resolvePath(route) {
-        if (Array.isArray(route)) {
-            route = route.join('/');
-        }
-        if (route === '') {
-            route = '/';
-        }
-        const isAbsolute = route.startsWith('/');
-        const isReplaceCurrent = route.startsWith('./');
-        const isBack = route.startsWith('../');
-        const isForward = !isAbsolute && !isReplaceCurrent && !isBack;
-        const curr = this._syncCurrentRoute();
-        if (isForward) {
-            route = `${curr}/${route}`;
-        }
-        else if (isReplaceCurrent) {
-            const currSegments = curr.split('/').filter((s) => s !== '');
-            currSegments.pop();
-            const newSegments = route.split('/').filter((s) => s !== '.');
-            route = `/${currSegments.concat(newSegments).join('/')}`;
-        }
-        else if (isBack) {
-            const currSegments = curr.split('/').filter((s) => s !== '');
-            const newSegments = route.split('/').filter((s) => s !== '..');
-            const stepsBack = route.split('/').filter((s) => s === '..').length;
-            for (let i = 0; i < stepsBack; i++) {
-                currSegments.pop();
+        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();
             }
-            route = `/${currSegments.concat(newSegments).join('/')}`;
-        }
-        return {
-            route,
-            type: isBack || route === '/'
-                ? 'back'
-                : isReplaceCurrent
-                    ? 'replace-current'
-                    : isAbsolute
-                        ? 'absolute'
-                        : isForward
-                            ? 'forward'
-                            : 'unknown',
-        };
+        });
+        return overlayRef;
+        /* eslint-enable @typescript-eslint/no-non-null-assertion*/
     }
-    addRoute(route) {
-        this.extraRoutes.set([...this.extraRoutes(), route]);
+    closeAll() {
+        this._closeOverlays(this.openOverlays);
     }
-    removeRoute(path) {
-        this.extraRoutes.set(this.extraRoutes().filter((r) => r.path !== path));
+    getOverlayById(id) {
+        return this.openOverlays.find((overlay) => overlay.id === id);
     }
-    _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);
-            return;
+    _closeOverlays(overlays) {
+        let i = overlays.length;
+        while (i--) {
+            overlays[i]?.close();
         }
-        this._syncCurrentRoute.set(route);
-        this._updateBrowserUrl(route);
-    }
-    _getInitialRoute() {
-        return this._config.initialRoute ?? this._config.routes[0]?.path ?? '/';
-    }
-    _navigateToInitialRoute() {
-        this._updateCurrentRoute(this._getInitialRoute());
-    }
-    _updateBrowserUrl(route) {
-        this._router.navigate([this._routerStateService.route], {
-            queryParams: { [this._id]: route },
-            queryParamsHandling: 'merge',
-        });
     }
-    _disableCloseOnNavigation() {
-        // @ts-expect-error - private property
-        this._overlayRef._cdkRef.overlayRef._locationChanges?.unsubscribe?.();
+    _getAfterAllClosed() {
+        const parent = this._parentOverlayService;
+        return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OverlayService }); }
 }
-const provideOverlayRouterConfig = (config) => {
-    return [
-        {
-            provide: OVERLAY_ROUTER_CONFIG_TOKEN,
-            useValue: config,
-        },
-    ];
-};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OverlayService, decorators: [{
+            type: Injectable
+        }] });
 
-function getClosestOverlay(element, openOverlays) {
-    let parent = element.nativeElement.parentElement;
-    while (parent && !parent.classList.contains('et-overlay')) {
-        parent = parent.parentElement;
-    }
-    return parent ? openOverlays.find((overlay) => overlay.id === parent?.id) : null;
-}
-const provideOverlayDefaultConfig = (config = {}) => {
-    return { provide: OVERLAY_DEFAULT_OPTIONS, useValue: createOverlayConfig(config) };
+const createOverlayHandler = (rootConfig) => {
+    const fn = (innerConfig) => {
+        const overlayService = inject(OverlayService);
+        const viewContainerRef = inject(ViewContainerRef);
+        const overlayRef = inject(OverlayRef, { optional: true });
+        const destroyRef = inject(DestroyRef);
+        const tpl = rootConfig.component ?? rootConfig.template;
+        if (!tpl) {
+            throw new Error('Either component or template must be provided');
+        }
+        const open = (config) => {
+            const ref = overlayService.open(tpl, {
+                viewContainerRef,
+                ...rootConfig,
+                positions: rootConfig.positions(overlayService.positions),
+                ...config,
+            });
+            const afterClosedFn = innerConfig?.afterClosed;
+            if (afterClosedFn) {
+                ref
+                    .afterClosed()
+                    .pipe(takeUntilDestroyed(destroyRef), tap((r) => afterClosedFn(r ?? null)))
+                    .subscribe();
+            }
+            return ref;
+        };
+        const getOverlayRef = () => {
+            if (!overlayRef) {
+                throw new Error('OverlayRef is only available inside the overlay component or templateRef');
+            }
+            return overlayRef;
+        };
+        const handler = {
+            open,
+            getOverlayRef,
+        };
+        return handler;
+    };
+    return fn;
 };
 
-let uniqueId$1 = 0;
-const ID_PREFIX = 'et-overlay-';
-const setStyle = (el, style, value) => {
-    if (value === null || value === undefined) {
-        el.style.removeProperty(style);
+const ET_OVERLAY_LEFT_SHEET_CLASS = 'et-overlay--left-sheet';
+const ET_OVERLAY_RIGHT_SHEET_CLASS = 'et-overlay--right-sheet';
+const ET_OVERLAY_TOP_SHEET_CLASS = 'et-overlay--top-sheet';
+const ET_OVERLAY_BOTTOM_SHEET_CLASS = 'et-overlay--bottom-sheet';
+const ET_OVERLAY_DIALOG_CLASS = 'et-overlay--dialog';
+const ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS = 'et-overlay--full-screen-dialog';
+const ET_OVERLAY_CONFIG_CLASS_KEYS = new Set([
+    'containerClass',
+    'paneClass',
+    'overlayClass',
+    'backdropClass',
+    'documentClass',
+    'bodyClass',
+]);
+const ET_OVERLAY_LAYOUT_CLASSES = new Set([
+    ET_OVERLAY_LEFT_SHEET_CLASS,
+    ET_OVERLAY_RIGHT_SHEET_CLASS,
+    ET_OVERLAY_TOP_SHEET_CLASS,
+    ET_OVERLAY_BOTTOM_SHEET_CLASS,
+    ET_OVERLAY_DIALOG_CLASS,
+    ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS,
+]);
+class OverlayPositionBuilder {
+    constructor() {
+        this._overlay = inject(Overlay);
+        this.DEFAULTS = {
+            dialog: {
+                width: undefined,
+                height: undefined,
+                maxHeight: '80vh',
+                maxWidth: '80vw',
+                minHeight: undefined,
+                minWidth: undefined,
+                containerClass: ET_OVERLAY_DIALOG_CLASS,
+                positionStrategy: () => this._overlay.position().global().centerHorizontally().centerVertically(),
+            },
+            fullScreenDialog: {
+                width: '100%',
+                height: '100%',
+                maxHeight: undefined,
+                maxWidth: undefined,
+                minHeight: undefined,
+                minWidth: undefined,
+                containerClass: ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS,
+                positionStrategy: () => this._overlay.position().global().left('0').top('0').bottom('0').right('0'),
+                documentClass: 'et-overlay--full-screen-dialog-document',
+                applyTransformOrigin: true,
+            },
+            bottomSheet: {
+                width: '100%',
+                height: undefined,
+                maxHeight: 'calc(100% - 72px)',
+                maxWidth: '640px',
+                minHeight: undefined,
+                minWidth: undefined,
+                containerClass: ET_OVERLAY_BOTTOM_SHEET_CLASS,
+                positionStrategy: () => this._overlay.position().global().centerHorizontally().bottom('0'),
+                dragToDismiss: {
+                    direction: 'to-bottom',
+                },
+            },
+            topSheet: {
+                width: '100%',
+                height: undefined,
+                maxHeight: 'calc(100% - 72px)',
+                maxWidth: '640px',
+                minHeight: undefined,
+                minWidth: undefined,
+                containerClass: ET_OVERLAY_TOP_SHEET_CLASS,
+                positionStrategy: () => this._overlay.position().global().centerHorizontally().top('0'),
+                dragToDismiss: {
+                    direction: 'to-top',
+                },
+            },
+            leftSheet: {
+                width: '100%',
+                height: '100%',
+                maxHeight: undefined,
+                maxWidth: '640px',
+                minHeight: undefined,
+                minWidth: undefined,
+                containerClass: ET_OVERLAY_LEFT_SHEET_CLASS,
+                positionStrategy: () => this._overlay.position().global().left('0').centerVertically(),
+                dragToDismiss: {
+                    direction: 'to-left',
+                },
+            },
+            rightSheet: {
+                width: '100%',
+                height: '100%',
+                maxHeight: undefined,
+                maxWidth: '640px',
+                minHeight: undefined,
+                minWidth: undefined,
+                containerClass: ET_OVERLAY_RIGHT_SHEET_CLASS,
+                positionStrategy: () => this._overlay.position().global().right('0').centerVertically(),
+                dragToDismiss: {
+                    direction: 'to-right',
+                },
+            },
+        };
     }
-    else {
-        el.style.setProperty(style, coerceCssPixelValue(value));
+    transformingBottomSheetToDialog(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.bottomSheet, customConfig?.bottomSheet ?? {}),
+            },
+            {
+                breakpoint: customConfig?.breakpoint ?? 'md',
+                config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig?.dialog ?? {}),
+            },
+        ];
+        return data;
+    }
+    transformingFullScreenDialogToRightSheet(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig?.fullScreenDialog ?? {}),
+            },
+            {
+                breakpoint: customConfig?.breakpoint ?? 'md',
+                config: this.mergeConfigs(this.DEFAULTS.rightSheet, customConfig?.rightSheet ?? {}),
+            },
+        ];
+        return data;
     }
-};
-const setClass = (el, prevClass, currClass) => {
-    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);
-            }
-        }
+    transformingFullScreenDialogToDialog(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig?.fullScreenDialog ?? {}),
+            },
+            {
+                breakpoint: customConfig?.breakpoint ?? 'md',
+                config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig?.dialog ?? {}),
+            },
+        ];
+        return data;
     }
-};
-const isHtmlElement = (element) => {
-    return element instanceof HTMLElement;
-};
-const isTouchEvent = (event) => {
-    return event.type[0] === 't';
-};
-const isPointerEvent = (event) => {
-    return event.type[0] === 'c';
-};
-class OverlayService {
-    constructor() {
-        this._destroy$ = createDestroy();
-        this._defaultOptions = inject(OVERLAY_DEFAULT_OPTIONS, { optional: true });
-        this._scrollStrategy = inject(OVERLAY_SCROLL_STRATEGY);
-        this._parentOverlayService = inject(OverlayService, { optional: true, skipSelf: true });
-        this._dialog = inject(Dialog);
-        this._viewportService = inject(ViewportService);
-        this._openOverlaysAtThisLevel = [];
-        this._afterAllClosedAtThisLevel = new Subject();
-        this._afterOpenedAtThisLevel = new Subject();
-        this.positions = new OverlayPositionBuilder();
-        this.afterAllClosed = defer(() => this.openOverlays.length ? this._getAfterAllClosed() : this._getAfterAllClosed().pipe(startWith(undefined)));
+    dialog(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.dialog, customConfig ?? {}),
+            },
+        ];
+        return data;
     }
-    get openOverlays() {
-        return this._parentOverlayService ? this._parentOverlayService.openOverlays : this._openOverlaysAtThisLevel;
+    fullScreenDialog(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.fullScreenDialog, customConfig ?? {}),
+            },
+        ];
+        return data;
     }
-    get afterOpened() {
-        return this._parentOverlayService ? this._parentOverlayService.afterOpened : this._afterOpenedAtThisLevel;
+    bottomSheet(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.bottomSheet, customConfig ?? {}),
+            },
+        ];
+        return data;
     }
-    ngOnDestroy() {
-        this._closeOverlays(this._openOverlaysAtThisLevel);
-        this._afterAllClosedAtThisLevel.complete();
-        this._afterOpenedAtThisLevel.complete();
+    topSheet(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.topSheet, customConfig ?? {}),
+            },
+        ];
+        return data;
     }
-    open(componentOrTemplateRef, config) {
-        let overlayRef;
-        const composedConfig = createOverlayConfig(this._defaultOptions, config);
-        composedConfig.id = composedConfig.id || `${ID_PREFIX}${uniqueId$1++}`;
-        composedConfig.scrollStrategy = composedConfig.scrollStrategy || this._scrollStrategy();
-        const cdkRef = this._dialog.open(componentOrTemplateRef, {
-            ...composedConfig,
-            disableClose: true,
-            closeOnDestroy: false,
-            panelClass: 'et-overlay-pane',
-            container: {
-                type: OverlayContainerComponent,
-                providers: () => [
-                    { provide: OVERLAY_CONFIG, useValue: composedConfig },
-                    { provide: DialogConfig, useValue: composedConfig },
-                ],
+    leftSheet(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.leftSheet, customConfig ?? {}),
             },
-            templateContext: () => ({ dialogRef: overlayRef }),
-            providers: (ref, cdkConfig, overlayContainer) => {
-                const container = overlayContainer;
-                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 ?? []),
-                ];
+        ];
+        return data;
+    }
+    rightSheet(customConfig) {
+        const data = [
+            {
+                config: this.mergeConfigs(this.DEFAULTS.rightSheet, customConfig ?? {}),
             },
-        });
-        /* eslint-disable @typescript-eslint/no-non-null-assertion*/
-        overlayRef.componentRef = cdkRef.componentRef;
-        overlayRef.componentInstance = cdkRef.componentInstance;
-        cdkRef.containerInstance.overlayRef = overlayRef;
-        const containerEl = overlayRef._containerInstance.elementRef.nativeElement;
-        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, append) => {
-                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.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.getBoundingClientRect().top
-                            : -1;
-                if (originX !== -1 && originY !== -1 && currConfig.applyTransformOrigin) {
-                    setStyle(containerEl, 'transform-origin', `${originX}px ${originY}px`);
+        ];
+        return data;
+    }
+    mergeConfigs(...configs) {
+        const combinedConfig = {};
+        for (const config of configs) {
+            for (const configKey of Object.keys(config)) {
+                const key = configKey;
+                const newConfigValue = config[key];
+                if (ET_OVERLAY_CONFIG_CLASS_KEYS.has(configKey)) {
+                    const existing = combinedConfig[key];
+                    if (existing && Array.isArray(existing)) {
+                        if (Array.isArray(newConfigValue)) {
+                            existing.push(...newConfigValue);
+                        }
+                        else if (typeof newConfigValue === 'string') {
+                            existing.push(newConfigValue);
+                        }
+                        const totalLayoutClassesInExisting = existing.filter((value) => ET_OVERLAY_LAYOUT_CLASSES.has(value)).length;
+                        if (totalLayoutClassesInExisting > 1) {
+                            throw new Error(`Multiple layout classes are not allowed in the same config key: ${key}`);
+                        }
+                    }
+                    else if (typeof newConfigValue === 'string') {
+                        combinedConfig[key] = [newConfigValue];
+                    }
+                    else if (Array.isArray(newConfigValue)) {
+                        combinedConfig[key] = newConfigValue;
+                    }
                 }
                 else {
-                    setStyle(containerEl, 'transform-origin', null);
+                    combinedConfig[key] = newConfigValue;
+                }
+            }
+        }
+        return combinedConfig;
+    }
+}
+
+const OVERLAY_ROUTER_CONFIG_TOKEN = new InjectionToken('OVERLAY_ROUTER_CONFIG_TOKEN');
+class OverlayRouterService {
+    constructor() {
+        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._getInitialRoute() });
+        this.extraRoutes = signal([]);
+        this.transitionType = signal('slide');
+        this.routes = computed(() => {
+            const allRoutes = [...this._config.routes, ...this.extraRoutes()];
+            const allRoundsWithTransformedInputs = allRoutes.map((route) => {
+                return {
+                    ...route,
+                    inputs: Object.entries(route.inputs ?? {}).reduce((acc, [key, value]) => {
+                        if (isSignal(value)) {
+                            acc[key] = value();
+                        }
+                        else {
+                            acc[key] = value;
+                        }
+                        return acc;
+                    }, {}),
+                };
+            });
+            return allRoundsWithTransformedInputs;
+        });
+        this.currentPage = computed(() => {
+            const currentRoute = this._syncCurrentRoute();
+            for (const route of this.routes()) {
+                if (route.path === currentRoute) {
+                    return route;
                 }
             }
-            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);
+            return null;
+        });
+        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 {
-                    applyDefaultMaxWidths();
+                    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]);
+                    }
                 }
             }
             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();
+                // The navigation was triggered by ui interaction. Clear the back nav stack.
+                this._nativeBrowserTempBackNavigationStack.set([]);
             }
         }))
             .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);
-                }
-            }
+        inject(DestroyRef).onDestroy(() => {
+            // Remove the dialog route from the browser url
+            this._updateBrowserUrl(undefined);
         });
-        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();
+    }
+    navigate(route, config) {
+        const resolvedRoute = this.resolvePath(route);
+        if (config?.navigationDirection) {
+            this.navigationDirection.set(config.navigationDirection);
+        }
+        else if (resolvedRoute.type === 'back') {
+            this.navigationDirection.set('backward');
+        }
+        else {
+            this.navigationDirection.set('forward');
+        }
+        this._updateCurrentRoute(resolvedRoute.route);
+    }
+    resolvePath(route) {
+        if (Array.isArray(route)) {
+            route = route.join('/');
+        }
+        if (route === '') {
+            route = '/';
+        }
+        const isAbsolute = route.startsWith('/');
+        const isReplaceCurrent = route.startsWith('./');
+        const isBack = route.startsWith('../');
+        const isForward = !isAbsolute && !isReplaceCurrent && !isBack;
+        const curr = this._syncCurrentRoute();
+        if (isForward) {
+            route = `${curr}/${route}`;
+        }
+        else if (isReplaceCurrent) {
+            const currSegments = curr.split('/').filter((s) => s !== '');
+            currSegments.pop();
+            const newSegments = route.split('/').filter((s) => s !== '.');
+            route = `/${currSegments.concat(newSegments).join('/')}`;
+        }
+        else if (isBack) {
+            const currSegments = curr.split('/').filter((s) => s !== '');
+            const newSegments = route.split('/').filter((s) => s !== '..');
+            const stepsBack = route.split('/').filter((s) => s === '..').length;
+            for (let i = 0; i < stepsBack; i++) {
+                currSegments.pop();
             }
-        });
-        return overlayRef;
-        /* eslint-enable @typescript-eslint/no-non-null-assertion*/
+            route = `/${currSegments.concat(newSegments).join('/')}`;
+        }
+        return {
+            route,
+            type: isBack || route === '/'
+                ? 'back'
+                : isReplaceCurrent
+                    ? 'replace-current'
+                    : isAbsolute
+                        ? 'absolute'
+                        : isForward
+                            ? 'forward'
+                            : 'unknown',
+        };
     }
-    closeAll() {
-        this._closeOverlays(this.openOverlays);
+    addRoute(route) {
+        this.extraRoutes.set([...this.extraRoutes(), route]);
     }
-    getOverlayById(id) {
-        return this.openOverlays.find((overlay) => overlay.id === id);
+    removeRoute(path) {
+        this.extraRoutes.set(this.extraRoutes().filter((r) => r.path !== path));
     }
-    _closeOverlays(overlays) {
-        let i = overlays.length;
-        while (i--) {
-            overlays[i]?.close();
+    _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);
+            return;
         }
+        this._syncCurrentRoute.set(route);
+        this._updateBrowserUrl(route);
     }
-    _getAfterAllClosed() {
-        const parent = this._parentOverlayService;
-        return parent ? parent._getAfterAllClosed() : this._afterAllClosedAtThisLevel;
+    _getInitialRoute() {
+        return this._config.initialRoute ?? this._config.routes[0]?.path ?? '/';
+    }
+    _navigateToInitialRoute() {
+        this._updateCurrentRoute(this._getInitialRoute());
+    }
+    _updateBrowserUrl(route) {
+        this._router.navigate([this._routerStateService.route], {
+            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: "18.1.4", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OverlayService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: OverlayService, decorators: [{
-            type: Injectable
-        }] });
+const provideOverlayRouterConfig = (config) => {
+    return [
+        {
+            provide: OVERLAY_ROUTER_CONFIG_TOKEN,
+            useValue: config,
+        },
+    ];
+};
+
+function getClosestOverlay(element, openOverlays) {
+    let parent = element.nativeElement.parentElement;
+    while (parent && !parent.classList.contains('et-overlay')) {
+        parent = parent.parentElement;
+    }
+    return parent ? openOverlays.find((overlay) => overlay.id === parent?.id) : null;
+}
+const provideOverlayDefaultConfig = (config = {}) => {
+    return { provide: OVERLAY_DEFAULT_OPTIONS, useValue: createOverlayConfig(config) };
+};
 
 const OVERLAY_BODY_TOKEN = new InjectionToken('OVERLAY_BODY_TOKEN');
 class OverlayBodyComponent {
@@ -17715,5 +17756,5 @@ const FLOATING_UI_PLACEMENTS = [
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, ButtonComponent, ButtonDirective, ButtonImports, CAROUSEL_ITEM_NAV_TOKEN, CAROUSEL_ITEM_TOKEN, CAROUSEL_NEXT_BUTTON_TOKEN, CAROUSEL_PREVIOUS_BUTTON_TOKEN, CAROUSEL_TOGGLE_AUTO_PLAY_BUTTON_TOKEN, CAROUSEL_TOKEN, CDK_MENU, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_BODY_EMPTY_TEMPLATE_TOKEN, COMBOBOX_BODY_ERROR_TEMPLATE_TOKEN, COMBOBOX_BODY_LOADING_TEMPLATE_TOKEN, COMBOBOX_BODY_MORE_ITEMS_HINT_TEMPLATE_TOKEN, COMBOBOX_BODY_TOKEN, COMBOBOX_CONFIG_TOKEN, COMBOBOX_DEFAULT_CONFIG, COMBOBOX_OPTION_TEMPLATE_TOKEN, COMBOBOX_OPTION_TOKEN, COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, COMBOBOX_TOKEN, CarouselComponent, CarouselDirective, CarouselImports, CarouselItemComponent, CarouselItemDirective, CarouselItemNavComponent, CarouselItemNavDirective, CarouselNextButtonDirective, CarouselPreviousButtonDirective, CarouselToggleAutoPlayButtonDirective, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxBodyComponent, ComboboxBodyEmptyTemplateDirective, ComboboxBodyErrorTemplateDirective, ComboboxBodyLoadingTemplateDirective, ComboboxBodyMoreItemsHintTemplateDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionComponent, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, ContextMenuTracker, DATE_INPUT_FORMAT_TOKEN, DATE_INPUT_TOKEN, DATE_TIME_INPUT_FORMAT_TOKEN, DATE_TIME_INPUT_TOKEN, DEFAULT_DATE_INPUT_FORMAT, DEFAULT_DATE_TIME_INPUT_FORMAT, DEFAULT_TIME_INPUT_FORMAT, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DateInputComponent, DateInputDirective, DateTimeInputComponent, DateTimeInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, DynamicOverlayTitleDirective, EMAIL_INPUT_TOKEN, ET_OVERLAY_BOTTOM_SHEET_CLASS, ET_OVERLAY_CONFIG_CLASS_KEYS, ET_OVERLAY_DIALOG_CLASS, ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS, ET_OVERLAY_LAYOUT_CLASSES, ET_OVERLAY_LEFT_SHEET_CLASS, ET_OVERLAY_RIGHT_SHEET_CLASS, ET_OVERLAY_TOP_SHEET_CLASS, EXPOSE_INPUT_VARS_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, ExposeInputVarsDirective, FILTER_OVERLAY_CONFIG, FLOATING_UI_PLACEMENTS, FilterOverlayService, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, IMAGE_CONFIG_TOKEN, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconImports, IfInputEmptyDirective, IfInputFilledDirective, IfSupportsShowPickerDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MENU, MENU_AIM, MENU_CHECKBOX_GROUP_TOKEN, MENU_CONTAINER, MENU_GROUP_TITLE_TOKEN, MENU_GROUP_TOKEN, MENU_ITEM_TOKEN, MENU_RADIO_GROUP_TOKEN, MENU_SEARCH_TEMPLATE_TOKEN, MENU_STACK, MENU_TEMPLATE, MENU_TRIGGER, MENU_TRIGGER_TOKEN, MasonryComponent, MasonryImports, MasonryItemComponent, MenuCheckboxGroupDirective, MenuCheckboxItemComponent, MenuComponent, MenuContainerComponent, MenuGroupDirective, MenuGroupTitleDirective, MenuImports, MenuItemDirective, MenuRadioGroupDirective, MenuRadioItemComponent, MenuSearchTemplateDirective, MenuStack, MenuTriggerDirective, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CLOSE_BLOCKER_TOKEN, OVERLAY_CONFIG, OVERLAY_DATA, OVERLAY_DEFAULT_CONFIG, OVERLAY_DEFAULT_OPTIONS, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_MAIN_TOKEN, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_SCROLL_STRATEGY, OVERLAY_SCROLL_STRATEGY_PROVIDER, OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OVERLAY_STATE, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseBlockerDirective, OverlayCloseDirective, OverlayContainerComponent, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayImports, OverlayMainDirective, OverlayPositionBuilder, OverlayRef, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlayRouterService, OverlayService, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlayTitleDirective, OverlayWithRoutingImports, OverlayWithSidebarImports, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationHeadService, PaginationImports, PaginationLinkDirective, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PointerFocusTracker, ProgressSpinnerComponent, QUERY_ERROR_TOKEN, QueryButtonComponent, QueryButtonDirective, QueryErrorComponent, QueryErrorDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RICH_FILTER_BUTTON_SLOT_TOKEN, RICH_FILTER_BUTTON_TOKEN, RICH_FILTER_CONTENT_TOKEN, RICH_FILTER_TOP_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RecycleRowsDirective, RichFilterButtonDirective, RichFilterButtonSlotDirective, RichFilterContentDirective, RichFilterHostComponent, RichFilterImports, RichFilterTopDirective, RowComponent, RowDefDirective, SCROLLABLE_IGNORE_CHILD_ATTRIBUTE, SCROLLABLE_IGNORE_CHILD_TOKEN, SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE, SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, SCROLLABLE_LOADING_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECTION_LIST_FIELD, SELECTION_LIST_OPTION, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SHOW_PICKER_TRIGGER_TOKEN, SIDEBAR_OVERLAY_CONFIG, SLIDE_TOGGLE_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, ScrollableComponent, ScrollableIgnoreChildDirective, ScrollableImports, ScrollableIsActiveChildDirective, ScrollableLoadingTemplateDirective, ScrollablePlaceholderComponent, ScrollablePlaceholderItemTemplateDirective, ScrollablePlaceholderOverlayTemplateDirective, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SelectionListFieldComponent, SelectionListFieldDirective, SelectionListImports, SelectionListOptionComponent, SelectionListOptionDirective, ShowPickerTriggerDirective, SidebarOverlayService, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEL_INPUT_TOKEN, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TIME_INPUT_FORMAT_TOKEN, TIME_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TargetMenuAim, TelInputComponent, TelInputDirective, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, TimeInputComponent, TimeInputDirective, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, VALIDATOR_ERROR_SERVICE_TOKEN, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, accordionAnimations, convertHttpStatusCodeToMessageDe, convertHttpStatusCodeToMessageEn, convertHttpStatusCodeToTitleDe, convertHttpStatusCodeToTitleEn, createBottomSheetConfig, createBracketConfig, createComboboxConfig, createDialogConfig, createOverlayConfig, createOverlayDismissChecker, createToggletipConfig, createTooltipConfig, defaultSubmitButtonConfigFn, getClosestBottomSheet, getClosestDialog, getClosestOverlay, isScrollableChildActive, isScrollableChildIgnored, isUpperBracketMatch, normalizePictureSizes, normalizePictureSource, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideComboboxConfig, provideDateFormat, provideDateTimeFormat, provideDialog, provideDialogDefaultConfig, provideFilterOverlayConfig, provideImageConfig, provideOverlay, provideOverlayDefaultConfig, provideOverlayRouterConfig, provideSidebarOverlayConfig, provideSort, provideTimeFormat, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
+export { ACCORDION_COMPONENT, ACCORDION_HINT_WRAPPER_DIRECTIVE, ACCORDION_LABEL_WRAPPER_DIRECTIVE, AccordionComponent, AccordionGroupComponent, AccordionHintDirective, AccordionHintWrapperDirective, AccordionImports, AccordionLabelDirective, AccordionLabelWrapperDirective, ActiveTabUnderlineBarManager, ActiveTabUnderlineDirective, AutosizeTextareaDirective, BOTTOM_SHEET_CONFIG, BOTTOM_SHEET_DATA, BOTTOM_SHEET_DEFAULT_CONFIG, BOTTOM_SHEET_DEFAULT_OPTIONS, BOTTOM_SHEET_MIN_SWIPE_TO_CLOSE_LENGTH, BOTTOM_SHEET_MIN_VELOCITY_TO_CLOSE, BOTTOM_SHEET_SCROLL_STRATEGY, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER, BOTTOM_SHEET_SCROLL_STRATEGY_PROVIDER_FACTORY, BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN, BottomSheetContainerBaseComponent, BottomSheetContainerComponent, BottomSheetDragHandleComponent, BottomSheetImports, BottomSheetRef, BottomSheetService, BottomSheetServiceBase, BottomSheetSwipeHandlerService, BottomSheetTitleDirective, Bracket, BracketComponent, BracketImports, BracketMatchComponent, BracketMatchDirective, BracketRoundDirective, BracketRoundHeaderComponent, ButtonComponent, ButtonDirective, ButtonImports, CAROUSEL_ITEM_NAV_TOKEN, CAROUSEL_ITEM_TOKEN, CAROUSEL_NEXT_BUTTON_TOKEN, CAROUSEL_PREVIOUS_BUTTON_TOKEN, CAROUSEL_TOGGLE_AUTO_PLAY_BUTTON_TOKEN, CAROUSEL_TOKEN, CDK_MENU, CHECKBOX_FIELD_TOKEN, CHECKBOX_GROUP_CONTROL_TOKEN, CHECKBOX_GROUP_TOKEN, CHECKBOX_TOKEN, COMBOBOX_BODY_EMPTY_TEMPLATE_TOKEN, COMBOBOX_BODY_ERROR_TEMPLATE_TOKEN, COMBOBOX_BODY_LOADING_TEMPLATE_TOKEN, COMBOBOX_BODY_MORE_ITEMS_HINT_TEMPLATE_TOKEN, COMBOBOX_BODY_TOKEN, COMBOBOX_CONFIG_TOKEN, COMBOBOX_DEFAULT_CONFIG, COMBOBOX_OPTION_TEMPLATE_TOKEN, COMBOBOX_OPTION_TOKEN, COMBOBOX_SELECTED_OPTION_TEMPLATE_TOKEN, COMBOBOX_TOKEN, CarouselComponent, CarouselDirective, CarouselImports, CarouselItemComponent, CarouselItemDirective, CarouselItemNavComponent, CarouselItemNavDirective, CarouselNextButtonDirective, CarouselPreviousButtonDirective, CarouselToggleAutoPlayButtonDirective, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, CellDefDirective, CellDirective, CheckboxComponent, CheckboxDirective, CheckboxFieldComponent, CheckboxFieldDirective, CheckboxGroupComponent, CheckboxGroupControlDirective, CheckboxGroupDirective, CheckboxImports, ChevronIconComponent, ColumnDefDirective, ComboboxBodyComponent, ComboboxBodyEmptyTemplateDirective, ComboboxBodyErrorTemplateDirective, ComboboxBodyLoadingTemplateDirective, ComboboxBodyMoreItemsHintTemplateDirective, ComboboxComponent, ComboboxDirective, ComboboxImports, ComboboxOptionComponent, ComboboxOptionTemplateDirective, ComboboxSelectedOptionTemplateDirective, ContextMenuTracker, DATE_INPUT_FORMAT_TOKEN, DATE_INPUT_TOKEN, DATE_TIME_INPUT_FORMAT_TOKEN, DATE_TIME_INPUT_TOKEN, DEFAULT_DATE_INPUT_FORMAT, DEFAULT_DATE_TIME_INPUT_FORMAT, DEFAULT_TIME_INPUT_FORMAT, DIALOG_CONFIG, DIALOG_DATA, DIALOG_DEFAULT_CONFIG, DIALOG_DEFAULT_OPTIONS, DIALOG_SCROLL_STRATEGY, DIALOG_SCROLL_STRATEGY_PROVIDER, DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, DYNAMIC_FORM_FIELD_TOKEN, DYNAMIC_FORM_GROUP_TOKEN, DateInputComponent, DateInputDirective, DateTimeInputComponent, DateTimeInputDirective, DecoratedFormFieldBase, DecoratedInputBase, DefaultValidatorErrorsService, DialogCloseDirective, DialogContainerBaseComponent, DialogContainerComponent, DialogImports, DialogRef, DialogService, DialogServiceBase, DialogTitleDirective, DynamicFormFieldDirective, DynamicFormGroupDirective, DynamicOverlayService, DynamicOverlayTitleDirective, EMAIL_INPUT_TOKEN, ET_OVERLAY_BOTTOM_SHEET_CLASS, ET_OVERLAY_CONFIG_CLASS_KEYS, ET_OVERLAY_DIALOG_CLASS, ET_OVERLAY_FULL_SCREEN_DIALOG_CLASS, ET_OVERLAY_LAYOUT_CLASSES, ET_OVERLAY_LEFT_SHEET_CLASS, ET_OVERLAY_RIGHT_SHEET_CLASS, ET_OVERLAY_TOP_SHEET_CLASS, EXPOSE_INPUT_VARS_TOKEN, EmailInputComponent, EmailInputDirective, ErrorComponent, ExposeInputVarsDirective, FILTER_OVERLAY_CONFIG, FLOATING_UI_PLACEMENTS, FilterOverlayService, FooterCellDefDirective, FooterCellDirective, FooterRowComponent, FooterRowDefDirective, FormFieldStateService, FormGroupStateService, HeaderCellDefDirective, HeaderCellDirective, HeaderRowComponent, HeaderRowDefDirective, IMAGE_CONFIG_TOKEN, INPUT_PREFIX_TOKEN, INPUT_SUFFIX_TOKEN, INPUT_TOKEN, IconImports, IfInputEmptyDirective, IfInputFilledDirective, IfSupportsShowPickerDirective, InlineTabBodyComponent, InlineTabBodyHostDirective, InlineTabChangeEvent, InlineTabComponent, InlineTabContentDirective, InlineTabHeaderComponent, InlineTabLabelDirective, InlineTabLabelWrapperDirective, InlineTabsComponent, InputBase, InputDirective, InputFieldComponent, InputImports, InputPrefixDirective, InputStateService, InputSuffixDirective, LABEL_TOKEN, LabelComponent, LabelImports, LabelSuffixDirective, MASONRY_ITEM_TOKEN, MAX_SAFE_INTEGER, MENU, MENU_AIM, MENU_CHECKBOX_GROUP_TOKEN, MENU_CONTAINER, MENU_GROUP_TITLE_TOKEN, MENU_GROUP_TOKEN, MENU_ITEM_TOKEN, MENU_RADIO_GROUP_TOKEN, MENU_SEARCH_TEMPLATE_TOKEN, MENU_STACK, MENU_TEMPLATE, MENU_TRIGGER, MENU_TRIGGER_TOKEN, MasonryComponent, MasonryImports, MasonryItemComponent, MenuCheckboxGroupDirective, MenuCheckboxItemComponent, MenuComponent, MenuContainerComponent, MenuGroupDirective, MenuGroupTitleDirective, MenuImports, MenuItemDirective, MenuRadioGroupDirective, MenuRadioItemComponent, MenuSearchTemplateDirective, MenuStack, MenuTriggerDirective, NATIVE_INPUT_REF_TOKEN, NATIVE_SELECT_INPUT_TOKEN, NATIVE_SELECT_OPTION_TOKEN, NUMBER_INPUT_TOKEN, NativeInputRefDirective, NativeSelectImports, NativeSelectInputComponent, NativeSelectInputDirective, NativeSelectOptionComponent, NativeSelectOptionDirective, NavTabLinkComponent, NavTabsComponent, NavTabsOutletComponent, NoDataRowDirective, NumberInputComponent, NumberInputDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CLOSE_BLOCKER_TOKEN, OVERLAY_CONFIG, OVERLAY_DATA, OVERLAY_DEFAULT_CONFIG, OVERLAY_DEFAULT_OPTIONS, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_MAIN_TOKEN, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_SCROLL_STRATEGY, OVERLAY_SCROLL_STRATEGY_PROVIDER, OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OVERLAY_STATE, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseBlockerDirective, OverlayCloseDirective, OverlayContainerComponent, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayImports, OverlayMainDirective, OverlayPositionBuilder, OverlayRef, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlayRouterService, OverlayService, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlayTitleDirective, OverlayWithRoutingImports, OverlayWithSidebarImports, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PASSWORD_INPUT_TOKEN, PROGRESS_SPINNER_DEFAULT_OPTIONS, PROGRESS_SPINNER_DEFAULT_OPTIONS_FACTORY, PaginatedTabHeaderDirective, PaginationComponent, PaginationHeadService, PaginationImports, PaginationLinkDirective, PasswordInputComponent, PasswordInputDirective, PasswordInputToggleComponent, PictureComponent, PointerFocusTracker, ProgressSpinnerComponent, QUERY_ERROR_TOKEN, QueryButtonComponent, QueryButtonDirective, QueryErrorComponent, QueryErrorDirective, RADIO_FIELD_TOKEN, RADIO_GROUP_TOKEN, RADIO_TOKEN, RICH_FILTER_BUTTON_SLOT_TOKEN, RICH_FILTER_BUTTON_TOKEN, RICH_FILTER_CONTENT_TOKEN, RICH_FILTER_TOP_TOKEN, RadioComponent, RadioDirective, RadioFieldComponent, RadioFieldDirective, RadioGroupComponent, RadioGroupDirective, RadioImports, RecycleRowsDirective, RichFilterButtonDirective, RichFilterButtonSlotDirective, RichFilterContentDirective, RichFilterHostComponent, RichFilterImports, RichFilterTopDirective, RowComponent, RowDefDirective, SCROLLABLE_IGNORE_CHILD_ATTRIBUTE, SCROLLABLE_IGNORE_CHILD_TOKEN, SCROLLABLE_IS_ACTIVE_CHILD_ATTRIBUTE, SCROLLABLE_IS_ACTIVE_CHILD_TOKEN, SCROLLABLE_LOADING_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_ITEM_TEMPLATE_TOKEN, SCROLLABLE_PLACEHOLDER_OVERLAY_TEMPLATE_TOKEN, SEARCH_INPUT_TOKEN, SEGMENTED_BUTTON_FIELD_TOKEN, SEGMENTED_BUTTON_GROUP_TOKEN, SEGMENTED_BUTTON_TOKEN, SELECTION_LIST_FIELD, SELECTION_LIST_OPTION, SELECT_BODY_TOKEN, SELECT_FIELD_TOKEN, SELECT_OPTION_TOKEN, SELECT_TOKEN, SHOW_PICKER_TRIGGER_TOKEN, SIDEBAR_OVERLAY_CONFIG, SLIDE_TOGGLE_TOKEN, SORT_DEFAULT_OPTIONS, SORT_HEADER_COLUMN_DEF, SORT_HEADER_INTL_PROVIDER, SORT_HEADER_INTL_PROVIDER_FACTORY, STATIC_FORM_FIELD_TOKEN, STATIC_FORM_GROUP_TOKEN, ScrollableComponent, ScrollableIgnoreChildDirective, ScrollableImports, ScrollableIsActiveChildDirective, ScrollableLoadingTemplateDirective, ScrollablePlaceholderComponent, ScrollablePlaceholderItemTemplateDirective, ScrollablePlaceholderOverlayTemplateDirective, SearchInputClearComponent, SearchInputComponent, SearchInputDirective, SegmentedButtonComponent, SegmentedButtonDirective, SegmentedButtonFieldComponent, SegmentedButtonFieldDirective, SegmentedButtonGroupComponent, SegmentedButtonGroupDirective, SegmentedButtonImports, SelectBodyComponent, SelectBodyDirective, SelectComponent, SelectDirective, SelectFieldComponent, SelectFieldDirective, SelectImports, SelectOptionComponent, SelectOptionDirective, SelectionListFieldComponent, SelectionListFieldDirective, SelectionListImports, SelectionListOptionComponent, SelectionListOptionDirective, ShowPickerTriggerDirective, SidebarOverlayService, SkeletonComponent, SkeletonImports, SkeletonItemComponent, SlideToggleComponent, SlideToggleDirective, SlideToggleFieldComponent, SlideToggleImports, SliderComponent, SliderFieldComponent, SliderImports, SortDirective, SortHeaderComponent, SortHeaderIntl, SortImports, StaticFormFieldDirective, StaticFormGroupDirective, SwipeHandlerService, TAB, TABS_CONFIG, TAB_CONTENT, TAB_GROUP, TAB_LABEL, TEL_INPUT_TOKEN, TEXTAREA_INPUT_TOKEN, TEXT_INPUT_TOKEN, TIME_INPUT_FORMAT_TOKEN, TIME_INPUT_TOKEN, TOGGLETIP, TOGGLETIP_CONFIG, TOGGLETIP_DEFAULT_CONFIG, TOGGLETIP_DIRECTIVE, TOGGLETIP_TEMPLATE, TOGGLETIP_TEXT, TOOLTIP, TOOLTIP_CONFIG, TOOLTIP_DEFAULT_CONFIG, TOOLTIP_DIRECTIVE, TOOLTIP_TEMPLATE, TOOLTIP_TEXT, TabImports, TableBusyDirective, TableBusyOutletDirective, TableComponent, TableDataSource, TableImports, TargetMenuAim, TelInputComponent, TelInputDirective, TextColumnComponent, TextInputComponent, TextInputDirective, TextareaInputComponent, TextareaInputDirective, TimeInputComponent, TimeInputDirective, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipImports, TooltipComponent, TooltipDirective, TooltipImports, VALIDATOR_ERROR_SERVICE_TOKEN, WRITEABLE_INPUT_TOKEN, WRITEABLE_INPUT_VALUE_ACCESSOR, WriteableInputDirective, _MAT_INK_BAR_POSITIONER, _MAT_INK_BAR_POSITIONER_FACTORY, accordionAnimations, convertHttpStatusCodeToMessageDe, convertHttpStatusCodeToMessageEn, convertHttpStatusCodeToTitleDe, convertHttpStatusCodeToTitleEn, createBottomSheetConfig, createBracketConfig, createComboboxConfig, createDialogConfig, createOverlayConfig, createOverlayDismissChecker, createOverlayHandler, createToggletipConfig, createTooltipConfig, defaultSubmitButtonConfigFn, getClosestBottomSheet, getClosestDialog, getClosestOverlay, isScrollableChildActive, isScrollableChildIgnored, isUpperBracketMatch, normalizePictureSizes, normalizePictureSource, normalizeRoundType, orderRounds, orderRoundsByRoundNumber, paginate, provideBottomSheet, provideBottomSheetDefaultConfig, provideBracketConfig, provideComboboxConfig, provideDateFormat, provideDateTimeFormat, provideDialog, provideDialogDefaultConfig, provideFilterOverlayConfig, provideImageConfig, provideOverlay, provideOverlayDefaultConfig, provideOverlayRouterConfig, provideSidebarOverlayConfig, provideSort, provideTimeFormat, provideToggletipConfig, provideTooltipConfig, provideValidatorErrorsService, tabAnimations };
 //# sourceMappingURL=ethlete-cdk.mjs.map