@ethlete/core 4.11.0 → 4.12.1

package/fesm2022/ethlete-core.mjs

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
-import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, TemplateRef, isSignal, signal, QueryList, Injector, runInInjectionContext, effect, afterNextRender, NgZone, isDevMode, computed, untracked, Directive, model, Injectable, EventEmitter, booleanAttribute, numberAttribute, Output, ViewContainerRef, Pipe, AfterRenderPhase, input } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, TemplateRef, Injectable, isSignal, signal, QueryList, Injector, runInInjectionContext, effect, afterNextRender, NgZone, isDevMode, computed, untracked, Directive, model, EventEmitter, booleanAttribute, numberAttribute, Output, ViewContainerRef, Pipe, AfterRenderPhase, input } from '@angular/core';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
-import { Subject, BehaviorSubject, takeUntil, switchMap, of, tap, map, startWith, Observable, combineLatest, timer, distinctUntilChanged, shareReplay, filter, take, pairwise, debounceTime, merge, skip, fromEvent, takeWhile, finalize } from 'rxjs';
+import { Subject, BehaviorSubject, takeUntil, switchMap, of, tap, map, startWith, Observable, combineLatest, timer, distinctUntilChanged, shareReplay, filter, take, fromEvent, pairwise, debounceTime, finalize, merge, skip, takeWhile } from 'rxjs';
 import { END, HOME, PAGE_DOWN, PAGE_UP, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { toSignal, takeUntilDestroyed, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
 import { coerceElement, coerceCssPixelValue } from '@angular/cdk/coercion';
-import { supportsScrollBehavior } from '@angular/cdk/platform';
 import * as i1 from '@angular/common';
-import { NgIf, DOCUMENT } from '@angular/common';
-import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { autoUpdate, computePosition, offset, flip, size, shift, limitShift, arrow, hide } from '@floating-ui/dom';
+import { DOCUMENT, NgIf } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { __decorate, __metadata } from 'tslib';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { supportsScrollBehavior } from '@angular/cdk/platform';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { autoUpdate, computePosition, offset, flip, size, shift, limitShift, arrow, hide } from '@floating-ui/dom';
 import { debounceTime as debounceTime$1 } from 'rxjs/operators';
 
 class StructuredDataComponent {
@@ -29,10 +29,10 @@ class StructuredDataComponent {
         const html = `<script type="application/ld+json">${json}</script>`;
         return this._sanitizer.bypassSecurityTrustHtml(html);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: StructuredDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: StructuredDataComponent, isStandalone: true, selector: "et-structured-data", inputs: { data: "data" }, host: { properties: { "innerHTML": "this.jsonLD" }, styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: StructuredDataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: StructuredDataComponent, isStandalone: true, selector: "et-structured-data", inputs: { data: "data" }, host: { properties: { "innerHTML": "this.jsonLD" }, styleAttribute: "display: none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: StructuredDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: StructuredDataComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'et-structured-data',
@@ -636,9 +636,11 @@ const getFormGroupValue = (formGroup) => {
 const injectHostElement = () => inject(ElementRef).nativeElement;
 const injectTemplateRef = () => inject(TemplateRef);
 
-const getFirstAndLastPartialIntersection = (intersections) => {
+// TODO: This needs to be redone, it's a mess...
+const getIntersectionInfo = (intersections) => {
+    const reverseIntersections = [...intersections].reverse();
     const firstIntersecting = intersections.find((i) => i.intersectionRatio > 0);
-    const lastIntersecting = [...intersections].reverse().find((i) => i.intersectionRatio > 0);
+    const lastIntersecting = reverseIntersections.find((i) => i.intersectionRatio > 0);
     const firstIntersectingIndex = intersections.findIndex((i) => i === firstIntersecting);
     const lastIntersectingIndex = intersections.findIndex((i) => i === lastIntersecting);
     if (!firstIntersecting || !lastIntersecting)
@@ -647,18 +649,54 @@ const getFirstAndLastPartialIntersection = (intersections) => {
     const greaterIntersectingIndex = firstIntersecting.intersectionRatio > lastIntersecting.intersectionRatio
         ? firstIntersectingIndex
         : lastIntersectingIndex;
+    const hasFullIntersection = intersections.some((i) => i.intersectionRatio === 1);
+    const hasMultipleFullIntersections = intersections.filter((i) => i.intersectionRatio === 1).length > 1;
+    const firstFullIntersectionIndex = intersections.findIndex((i) => i.intersectionRatio === 1);
+    const firstFullIntersection = intersections.find((i) => i.intersectionRatio === 1);
+    const lastFullIntersectionIndex = reverseIntersections.findIndex((i) => i.intersectionRatio === 1);
+    const lastFullIntersection = reverseIntersections.find((i) => i.intersectionRatio === 1);
+    const firstNonIntersectingIndex = intersections.findIndex((i) => i.intersectionRatio === 0);
+    const firstNonIntersection = intersections.find((i) => i.intersectionRatio === 0);
+    const lastNonIntersection = reverseIntersections.find((i) => i.intersectionRatio === 0);
+    const lastNonIntersectingIndex = intersections.findIndex((i) => i === lastNonIntersection);
     return {
-        first: {
-            intersection: firstIntersecting,
-            index: firstIntersectingIndex,
+        partial: {
+            hasAny: !!firstIntersecting || !!lastIntersecting,
+            hasMultiple: !!firstIntersecting || (!!lastIntersecting && firstIntersecting !== lastIntersecting),
+            first: {
+                intersection: firstIntersecting,
+                index: firstIntersectingIndex,
+            },
+            last: {
+                intersection: lastIntersecting,
+                index: lastIntersectingIndex,
+            },
+            biggest: {
+                intersection: greaterIntersecting,
+                index: greaterIntersectingIndex,
+            },
         },
-        last: {
-            intersection: lastIntersecting,
-            index: lastIntersectingIndex,
+        full: {
+            hasAny: hasFullIntersection,
+            hasMultiple: hasMultipleFullIntersections,
+            first: {
+                index: firstFullIntersectionIndex,
+                intersection: firstFullIntersection,
+            },
+            last: {
+                index: lastFullIntersectionIndex,
+                intersection: lastFullIntersection,
+            },
         },
-        biggest: {
-            intersection: greaterIntersecting,
-            index: greaterIntersectingIndex,
+        none: {
+            first: {
+                index: firstNonIntersectingIndex,
+                intersection: firstNonIntersection,
+            },
+            last: {
+                index: lastNonIntersectingIndex,
+                intersection: lastNonIntersection,
+            },
         },
     };
 };
@@ -1459,1542 +1497,1610 @@ class SelectionModel {
     }
 }
 
-function isElementSignal(el) {
-    if (isSignal(el)) {
-        const val = el();
-        return typeof val === 'object' && val !== null && 'currentElement' in val && 'previousElement' in val;
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+class ClickObserverFactory {
+    create() {
+        return fromEvent(document, 'click');
     }
-    return false;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickObserverFactory, providedIn: 'root' }); }
 }
-const documentElementSignal = () => signal({
-    currentElement: document.documentElement,
-    previousElement: null,
-    currentElements: [document.documentElement],
-    previousElements: [],
-});
-const buildElementSignal = (el) => {
-    if (el === null || el === undefined) {
-        return signal({ currentElement: null, previousElement: null, currentElements: [], previousElements: [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickObserverFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class ClickObserverService {
+    constructor() {
+        this._clickObserverFactory = inject(ClickObserverFactory);
+        this._observedElements = new Map();
     }
-    if (isElementSignal(el)) {
-        return el;
+    ngOnDestroy() {
+        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
     }
-    let mElSignal = null;
-    const switchElement = () => switchMap((elOrRef) => {
-        if (elOrRef instanceof QueryList) {
-            return elOrRef.changes.pipe(startWith(elOrRef), map(() => elOrRef.toArray().map((r) => coerceElement(r))));
-        }
-        else if (Array.isArray(elOrRef)) {
-            return of(elOrRef.map((r) => coerceElement(r)));
+    observe(elementOrRef) {
+        const element = coerceElement(elementOrRef);
+        return new Observable((observer) => {
+            const stream = this._observeElement(element);
+            const subscription = stream.subscribe(observer);
+            return () => {
+                subscription.unsubscribe();
+                this._unobserveElement(element);
+            };
+        });
+    }
+    _observeElement(element) {
+        if (!this._observedElements.has(element)) {
+            const stream = new Subject();
+            const observer = this._clickObserverFactory.create();
+            const sub = observer.subscribe((event) => stream.next(event));
+            this._observedElements.set(element, { observer: sub, stream, count: 1 });
         }
         else {
-            const coercedEl = coerceElement(elOrRef);
-            return of(coercedEl ? [coercedEl] : null);
+            this._observedElements.get(element).count++;
         }
-    });
-    if (el instanceof Observable) {
-        mElSignal = toSignal(el.pipe(switchElement()), { initialValue: null });
+        return this._observedElements.get(element).stream;
     }
-    else if (isSignal(el)) {
-        mElSignal = toSignal(toObservable(el).pipe(switchElement()), { initialValue: null });
+    _unobserveElement(element) {
+        if (this._observedElements.has(element)) {
+            this._observedElements.get(element).count--;
+            if (!this._observedElements.get(element).count) {
+                this._cleanupObserver(element);
+            }
+        }
     }
-    else if (el instanceof QueryList) {
-        mElSignal = toSignal(el.changes.pipe(startWith(el), map(() => el.toArray().map((r) => coerceElement(r)))), { initialValue: null });
+    _cleanupObserver(element) {
+        if (this._observedElements.has(element)) {
+            const { observer, stream } = this._observedElements.get(element);
+            if (observer) {
+                observer.unsubscribe();
+            }
+            stream.complete();
+            this._observedElements.delete(element);
+        }
     }
-    else {
-        mElSignal = signal([coerceElement(el)]);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickObserverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickObserverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+class MutationObserverFactory {
+    create(callback) {
+        return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
     }
-    return toSignal(toObservable(mElSignal).pipe(startWith(null), pairwise(), map(([previousElements, currentElements]) => ({
-        previousElements: previousElements ?? [],
-        currentElements: currentElements ?? [],
-        currentElement: currentElements?.[0] ?? null,
-        previousElement: previousElements?.[0] ?? null,
-    }))), { initialValue: { currentElement: null, previousElement: null, previousElements: [], currentElements: [] } });
-};
-const buildSignalEffects = (config) => {
-    const injector = inject(Injector);
-    const { map, eachItemFn, cleanupFn } = config;
-    const effectRefMap = {};
-    const has = (token) => token in effectRefMap;
-    const push = (tokenString, signal) => {
-        if (has(tokenString))
-            return;
-        const tokenArray = tokenString.split(' ').filter((token) => !!token);
-        for (const token of tokenArray) {
-            runInInjectionContext(injector, () => {
-                const ref = effect(() => {
-                    const value = signal();
-                    eachItemFn({ key: token, value });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: MutationObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: MutationObserverFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: MutationObserverFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class ContentObserverService {
+    constructor() {
+        this._mutationObserverFactory = inject(MutationObserverFactory);
+        this._observedElements = new Map();
+    }
+    ngOnDestroy() {
+        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    }
+    observe(elementOrRef) {
+        const element = coerceElement(elementOrRef);
+        return new Observable((observer) => {
+            const stream = this._observeElement(element);
+            const subscription = stream.subscribe(observer);
+            return () => {
+                subscription.unsubscribe();
+                this._unobserveElement(element);
+            };
+        });
+    }
+    _observeElement(element) {
+        if (!this._observedElements.has(element)) {
+            const stream = new Subject();
+            const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
+            if (observer) {
+                observer.observe(element, {
+                    characterData: true,
+                    childList: true,
+                    subtree: true,
                 });
-                effectRefMap[token] = ref;
-            });
-        }
-    };
-    const pushMany = (map) => {
-        for (const [tokenString, signal] of Object.entries(map)) {
-            push(tokenString, signal);
-        }
-    };
-    const remove = (...tokens) => {
-        for (const tokenString of tokens) {
-            effectRefMap[tokenString]?.destroy();
-            cleanupFn({ key: tokenString, value: map[tokenString]?.() });
-            delete effectRefMap[tokenString];
+            }
+            this._observedElements.set(element, { observer, stream, count: 1 });
         }
-    };
-    const removeMany = (tokens) => {
-        for (const token of tokens) {
-            remove(token);
+        else {
+            this._observedElements.get(element).count++;
         }
-    };
-    pushMany(map);
-    return { remove, removeMany, has, push, pushMany };
-};
-const signalIsRendered = () => {
-    const isRendered = signal(false);
-    afterNextRender(() => isRendered.set(true));
-    return isRendered.asReadonly();
-};
-const signalClasses = (el, classMap) => {
-    const elements = buildElementSignal(el);
-    return buildSignalEffects({
-        map: classMap,
-        eachItemFn: ({ key, value }) => {
-            if (value) {
-                elements().currentElement?.classList.add(key);
-            }
-            else {
-                elements().currentElement?.classList.remove(key);
-            }
-        },
-        cleanupFn: ({ key }) => elements().currentElement?.classList.remove(key),
-    });
-};
-const signalHostClasses = (classMap) => signalClasses(inject(ElementRef), classMap);
-const ALWAYS_TRUE_ATTRIBUTE_KEYS = ['disabled', 'readonly', 'required', 'checked', 'selected', 'hidden', 'inert'];
-const signalAttributes = (el, attributeMap) => {
-    const elements = buildElementSignal(el);
-    return buildSignalEffects({
-        map: attributeMap,
-        eachItemFn: ({ key, value }) => {
-            const valueString = `${value}`;
-            if (ALWAYS_TRUE_ATTRIBUTE_KEYS.includes(key)) {
-                if (value) {
-                    elements().currentElement?.setAttribute(key, '');
-                }
-                else {
-                    elements().currentElement?.removeAttribute(key);
-                }
-            }
-            else {
-                if (value === null || value === undefined) {
-                    elements().currentElement?.removeAttribute(key);
-                }
-                else {
-                    elements().currentElement?.setAttribute(key, valueString);
-                }
+        return this._observedElements.get(element).stream;
+    }
+    _unobserveElement(element) {
+        if (this._observedElements.has(element)) {
+            this._observedElements.get(element).count--;
+            if (!this._observedElements.get(element).count) {
+                this._cleanupObserver(element);
             }
-        },
-        cleanupFn: ({ key }) => elements().currentElement?.removeAttribute(key),
-    });
-};
-const signalHostAttributes = (attributeMap) => signalAttributes(inject(ElementRef), attributeMap);
-const signalStyles = (el, styleMap) => {
-    const elements = buildElementSignal(el);
-    return buildSignalEffects({
-        map: styleMap,
-        eachItemFn: ({ key, value }) => {
-            if (value === null || value === undefined) {
-                elements().currentElement?.style.removeProperty(key);
+        }
+    }
+    _cleanupObserver(element) {
+        if (this._observedElements.has(element)) {
+            const { observer, stream } = this._observedElements.get(element);
+            if (observer) {
+                observer.disconnect();
             }
-            else {
-                const valueString = `${value}`;
-                elements().currentElement?.style.setProperty(key, valueString);
-            }
-        },
-        cleanupFn: ({ key }) => elements().currentElement?.style.removeProperty(key),
-    });
-};
-const signalHostStyles = (styleMap) => signalStyles(inject(ElementRef), styleMap);
-const signalElementDimensions = (el) => {
-    const destroyRef = inject(DestroyRef);
-    const elements = buildElementSignal(el);
-    const zone = inject(NgZone);
-    const isRendered = signalIsRendered();
-    const initialValue = () => ({
-        rect: elements().currentElement?.getBoundingClientRect() ?? null,
-        borderBoxSize: null,
-        contentBoxSize: null,
-        devicePixelContentBoxSize: null,
-    });
-    const elementDimensionsSignal = signal(initialValue());
-    const observer = new ResizeObserver((e) => {
-        if (!isRendered())
-            return;
-        const entry = e[0];
-        if (entry) {
-            const devicePixelContentBoxSize = entry.devicePixelContentBoxSize?.[0] ?? null;
-            const borderBoxSize = entry.borderBoxSize?.[0] ?? null;
-            const contentBoxSize = entry.contentBoxSize?.[0] ?? null;
-            zone.run(() => elementDimensionsSignal.set({
-                rect: entry.contentRect,
-                borderBoxSize: borderBoxSize
-                    ? { inlineSize: borderBoxSize.inlineSize, blockSize: borderBoxSize.blockSize }
-                    : null,
-                contentBoxSize: contentBoxSize
-                    ? { inlineSize: contentBoxSize.inlineSize, blockSize: contentBoxSize.blockSize }
-                    : null,
-                devicePixelContentBoxSize: devicePixelContentBoxSize
-                    ? { inlineSize: devicePixelContentBoxSize.inlineSize, blockSize: devicePixelContentBoxSize.blockSize }
-                    : null,
-            }));
-        }
-    });
-    effect(() => {
-        const els = elements();
-        elementDimensionsSignal.set(initialValue());
-        if (els.previousElement) {
-            observer.disconnect();
-        }
-        if (els.currentElement) {
-            const computedDisplay = getComputedStyle(els.currentElement).display;
-            const currentElIsAngularComponent = els.currentElement?.tagName.toLowerCase().includes('-');
-            if (computedDisplay === 'inline' && isDevMode() && currentElIsAngularComponent) {
-                console.error(`Element <${els.currentElement?.tagName.toLowerCase()}> is an Angular component and has a display of 'inline'. Inline elements cannot be observed for dimensions. Please change it to 'block' or something else.`);
-            }
-            observer.observe(els.currentElement);
+            stream.complete();
+            this._observedElements.delete(element);
         }
-    }, { allowSignalWrites: true });
-    destroyRef.onDestroy(() => observer.disconnect());
-    return elementDimensionsSignal.asReadonly();
-};
-const signalHostElementDimensions = () => signalElementDimensions(inject(ElementRef));
-const signalElementMutations = (el, options) => {
-    const destroyRef = inject(DestroyRef);
-    const elements = buildElementSignal(el);
-    const zone = inject(NgZone);
-    const isRendered = signalIsRendered();
-    const elementMutationsSignal = signal(null);
-    const observer = new MutationObserver((e) => {
-        if (!isRendered())
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentObserverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ContentObserverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class FocusVisibleService {
+    get isFocusVisible() {
+        return this._hadKeyboardEvent;
+    }
+    constructor() {
+        this._document = inject(DOCUMENT);
+        this._hadKeyboardEvent = false;
+        this._document.addEventListener('keydown', this.onKeyDown.bind(this), true);
+        this._document.addEventListener('mousedown', this.onPointerDown.bind(this), true);
+        this._document.addEventListener('pointerdown', this.onPointerDown.bind(this), true);
+        this._document.addEventListener('touchstart', this.onPointerDown.bind(this), true);
+    }
+    onKeyDown(e) {
+        if (e.metaKey || e.altKey || e.ctrlKey) {
             return;
-        const entry = e[0];
-        if (entry) {
-            zone.run(() => elementMutationsSignal.set(entry));
         }
-    });
-    effect(() => {
-        const els = elements();
-        elementMutationsSignal.set(null);
-        if (els.previousElement) {
-            observer.disconnect();
+        this._hadKeyboardEvent = true;
+    }
+    onPointerDown() {
+        this._hadKeyboardEvent = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FocusVisibleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FocusVisibleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: FocusVisibleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+class IntersectionObserverFactory {
+    create(callback) {
+        return typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(callback);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IntersectionObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IntersectionObserverFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IntersectionObserverFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class IntersectionObserverService {
+    constructor() {
+        this._intersectionObserverFactory = inject(IntersectionObserverFactory);
+        this._observedElements = new Map();
+    }
+    ngOnDestroy() {
+        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    }
+    observe(elementOrRef) {
+        const element = coerceElement(elementOrRef);
+        return new Observable((observer) => {
+            const stream = this._observeElement(element);
+            const subscription = stream.subscribe(observer);
+            return () => {
+                subscription.unsubscribe();
+                this._unobserveElement(element);
+            };
+        });
+    }
+    _observeElement(element) {
+        if (!this._observedElements.has(element)) {
+            const stream = new Subject();
+            const observer = this._intersectionObserverFactory.create((mutations) => stream.next(mutations));
+            if (observer) {
+                observer.observe(element);
+            }
+            this._observedElements.set(element, { observer, stream, count: 1 });
         }
-        if (els.currentElement) {
-            observer.observe(els.currentElement, options);
+        else {
+            this._observedElements.get(element).count++;
         }
-    }, { allowSignalWrites: true });
-    destroyRef.onDestroy(() => observer.disconnect());
-    return elementMutationsSignal.asReadonly();
-};
-const signalHostElementMutations = (options) => signalElementMutations(inject(ElementRef), options);
-const signalElementScrollState = (el) => {
-    const elements = buildElementSignal(el);
-    const elementDimensions = signalElementDimensions(elements);
-    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true });
-    const isRendered = signalIsRendered();
-    return computed(() => {
-        const element = elements().currentElement;
-        const dimensions = elementDimensions();
-        const notScrollable = () => ({
-            canScroll: false,
-            canScrollHorizontally: false,
-            canScrollVertically: false,
-            scrollWidth: element?.scrollWidth ?? null,
-            scrollHeight: element?.scrollHeight ?? null,
-            elementDimensions: dimensions,
-        });
-        // We are not interested what the mutation is, just that there is one.
-        // Changes to the DOM can affect the scroll state of the element.
-        elementMutations();
-        if (!element || !dimensions.rect || !isRendered())
-            return notScrollable();
-        const { scrollWidth, scrollHeight } = element;
-        const { width, height } = dimensions.rect;
-        const canScrollHorizontally = scrollWidth > width;
-        const canScrollVertically = scrollHeight > height;
-        return {
-            canScroll: canScrollHorizontally || canScrollVertically,
-            canScrollHorizontally,
-            canScrollVertically,
-            scrollWidth,
-            scrollHeight,
-            elementDimensions: dimensions,
-        };
-    });
-};
-const signalHostElementScrollState = () => signalElementScrollState(inject(ElementRef));
-const signalElementIntersection = (el, options) => {
-    const destroyRef = inject(DestroyRef);
-    const elements = buildElementSignal(el);
-    const root = options?.root ? buildElementSignal(options?.root) : documentElementSignal();
-    const zone = inject(NgZone);
-    const isRendered = signalIsRendered();
-    const isEnabled = options?.enabled ?? signal(true);
-    const elementIntersectionSignal = signal([]);
-    const observer = signal(null);
-    effect(() => {
-        const rootEl = root().currentElement;
-        untracked(() => observer()?.disconnect());
-        const newObserver = new IntersectionObserver((entries) => {
-            if (!isRendered())
-                return;
-            let currentValues = untracked(() => [...elementIntersectionSignal()]);
-            for (const entry of entries) {
-                const existingEntryIndex = currentValues.findIndex((v) => v.target === entry.target);
-                if (existingEntryIndex !== -1) {
-                    currentValues = [
-                        ...currentValues.slice(0, existingEntryIndex),
-                        entry,
-                        ...currentValues.slice(existingEntryIndex + 1),
-                    ];
-                }
-                else {
-                    currentValues = [...currentValues, entry];
-                }
+        return this._observedElements.get(element).stream;
+    }
+    _unobserveElement(element) {
+        if (this._observedElements.has(element)) {
+            this._observedElements.get(element).count--;
+            if (!this._observedElements.get(element).count) {
+                this._cleanupObserver(element);
             }
-            zone.run(() => elementIntersectionSignal.set(currentValues));
-        }, { ...options, root: rootEl });
-        observer.set(newObserver);
-    }, { allowSignalWrites: true });
-    effect(() => {
-        const els = elements();
-        const obs = observer();
-        const enabled = isEnabled();
-        elementIntersectionSignal.set([]);
-        if (els.previousElements.length) {
-            obs?.disconnect();
         }
-        if (els.currentElements.length && !!enabled) {
-            for (const el of els.currentElements) {
-                obs?.observe(el);
+    }
+    _cleanupObserver(element) {
+        if (this._observedElements.has(element)) {
+            const { observer, stream } = this._observedElements.get(element);
+            if (observer) {
+                observer.disconnect();
             }
+            stream.complete();
+            this._observedElements.delete(element);
         }
-    }, { allowSignalWrites: true });
-    destroyRef.onDestroy(() => observer()?.disconnect());
-    return elementIntersectionSignal;
-};
-const signalHostElementIntersection = (options) => signalElementIntersection(inject(ElementRef), options);
-const signalElementChildren = (el) => {
-    const elements = buildElementSignal(el);
-    const isRendered = signalIsRendered();
-    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true, attributes: true });
-    return computed(() => {
-        if (!isRendered())
-            return [];
-        const els = elements();
-        // We are not interested what the mutation is, just that there is one.
-        // Changes to the DOM may affect the children of the element.
-        elementMutations();
-        if (!els.currentElement)
-            return [];
-        const children = [];
-        for (let index = 0; index < els.currentElement.children.length; index++) {
-            const element = els.currentElement.children[index];
-            if (element instanceof HTMLElement) {
-                children.push(element);
-            }
-        }
-        return children;
-    });
-};
-const previousSignalValue = (signal) => {
-    const obs = toObservable(signal).pipe(pairwise(), map(([prev]) => prev));
-    return toSignal(obs);
-};
-const syncSignal = (from, to) => {
-    effect(() => {
-        const formVal = from();
-        untracked(() => {
-            to.set(formVal);
-        });
-    });
-};
-const controlValueSignal = (control, options) => {
-    const vcsObs = options?.debounceTime
-        ? control.valueChanges.pipe(debounceTime(options?.debounceTime ?? 300))
-        : control.valueChanges;
-    const obs = options?.debounceFirst
-        ? merge(of(control.value), vcsObs)
-        : vcsObs.pipe(startWith(control.getRawValue()));
-    return toSignal(obs.pipe(distinctUntilChanged((a, b) => equal(a, b))), {
-        requireSync: true,
-    });
-};
-/**
- * The first item in the pair is the previous value and the second item is the current value.
- */
-const controlValueSignalWithPrevious = (control, options) => {
-    const obs = toObservable(controlValueSignal(control, options)).pipe(pairwise(), startWith([null, control.getRawValue()]));
-    return toSignal(obs, { requireSync: true });
-};
-/**
- * @deprecated Use `controlValueSignal` instead with `debounceTime` set to `300` and `debounceFirst` set to `true`.
- */
-const debouncedControlValueSignal = (control, options) => controlValueSignal(control, options ?? { debounceTime: 300, debounceFirst: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IntersectionObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IntersectionObserverService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IntersectionObserverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-const scrollBehaviorSupported = supportsScrollBehavior();
-let _uniqueIdCounter = 0;
-const BLOCK_CLASS = 'cdk-global-scrollblock';
-const OVERSCROLL_CLASS = 'et-global-no-overscroll';
-class SmartBlockScrollStrategy {
-    constructor(_viewportRuler, _routerState, document) {
-        this._viewportRuler = _viewportRuler;
-        this._routerState = _routerState;
-        this._id = _uniqueIdCounter++;
-        this._previousHTMLStyles = { top: '', left: '' };
-        this._previousScrollPosition = { top: 0, left: 0 };
-        this._isEnabled = false;
-        this._urlSubscription = null;
-        this._resizeSubscription = null;
-        this._didNavigate = false;
-        this._document = document;
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+class ResizeObserverFactory {
+    create(callback) {
+        return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
     }
-    attach() {
-        // noop
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ResizeObserverFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class ResizeObserverService {
+    constructor() {
+        this._mutationObserverFactory = inject(ResizeObserverFactory);
+        this._observedElements = new Map();
     }
-    enable() {
-        if (this._canBeEnabled()) {
-            const root = this._document.documentElement;
-            root.classList.add(OVERSCROLL_CLASS);
-            this._resizeSubscription = createResizeObservable({ elements: root })
-                .pipe(startWith(null), tap(() => {
-                if (this._isEnabled || !elementCanScroll(root) || !this._canBeEnabled())
-                    return;
-                this._isEnabled = true;
-                this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
-                this._didNavigate = false;
-                this._previousHTMLStyles.left = root.style.left || '';
-                this._previousHTMLStyles.top = root.style.top || '';
-                root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
-                root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
-                root.classList.add(BLOCK_CLASS);
-                this._urlSubscription = this._routerState.route$
-                    .pipe(skip(1), take(1), tap(() => {
-                    this._didNavigate = true;
-                }))
-                    .subscribe();
-            }))
-                .subscribe();
-        }
+    ngOnDestroy() {
+        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
     }
-    disable() {
-        this._urlSubscription?.unsubscribe();
-        this._resizeSubscription?.unsubscribe();
-        const html = this._document.documentElement;
-        if (this._canBeEnabled()) {
-            html.classList.remove(OVERSCROLL_CLASS);
-        }
-        if (this._isEnabled) {
-            const body = this._document.body;
-            const htmlStyle = html.style;
-            const bodyStyle = body.style;
-            const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
-            const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';
-            this._isEnabled = false;
-            htmlStyle.left = this._previousHTMLStyles.left;
-            htmlStyle.top = this._previousHTMLStyles.top;
-            html.classList.remove(BLOCK_CLASS);
-            if (scrollBehaviorSupported) {
-                htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
-            }
-            if (!this._didNavigate) {
-                window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
+    observe(elementOrRef) {
+        const element = coerceElement(elementOrRef);
+        return new Observable((observer) => {
+            const stream = this._observeElement(element);
+            const subscription = stream.subscribe(observer);
+            return () => {
+                subscription.unsubscribe();
+                this._unobserveElement(element);
+            };
+        });
+    }
+    _observeElement(element) {
+        if (!this._observedElements.has(element)) {
+            const stream = new Subject();
+            const observer = this._mutationObserverFactory.create((resizes) => stream.next(resizes));
+            if (observer) {
+                observer.observe(element);
             }
-            if (scrollBehaviorSupported) {
-                htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
-                bodyStyle.scrollBehavior = previousBodyScrollBehavior;
+            this._observedElements.set(element, { observer, stream, count: 1 });
+        }
+        else {
+            this._observedElements.get(element).count++;
+        }
+        return this._observedElements.get(element).stream;
+    }
+    _unobserveElement(element) {
+        if (this._observedElements.has(element)) {
+            this._observedElements.get(element).count--;
+            if (!this._observedElements.get(element).count) {
+                this._cleanupObserver(element);
             }
         }
     }
-    _canBeEnabled() {
-        const html = this._document.documentElement;
-        if (html.classList.contains(BLOCK_CLASS) || this._isEnabled) {
-            return false;
+    _cleanupObserver(element) {
+        if (this._observedElements.has(element)) {
+            const { observer, stream } = this._observedElements.get(element);
+            if (observer) {
+                observer.disconnect();
+            }
+            stream.complete();
+            this._observedElements.delete(element);
         }
-        return true;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ResizeObserverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-const isPrimitiveArray = (value) => {
-    if (!Array.isArray(value))
-        return false;
-    const first = value[0];
-    const last = value[value.length - 1];
-    if (!first || !last)
-        return false;
-    return typeof first !== 'object' && typeof last !== 'object';
-};
-const isObjectArray = (value) => {
-    if (!Array.isArray(value))
-        return false;
-    const first = value[0];
-    const last = value[value.length - 1];
-    if (!first || !last)
-        return false;
-    return typeof first === 'object' && typeof last === 'object' && !Array.isArray(first) && !Array.isArray(last);
-};
-const isEmptyArray = (value) => {
-    return Array.isArray(value) && value.length === 0;
-};
-
-const provideViewportConfig = (viewportConfig) => {
-    return { provide: VIEWPORT_CONFIG, useValue: viewportConfig };
+const ET_DISABLE_SCROLL_TOP = Symbol('ET_DISABLE_SCROLL_TOP');
+const ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE = Symbol('ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE');
+const ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE = Symbol('ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE');
+const routerDisableScrollTop = (config = {}) => {
+    return {
+        ...(!config.asReturnRoute ? { [ET_DISABLE_SCROLL_TOP]: true } : { [ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE]: true }),
+        ...(config.onPathParamChange ? { [ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE]: true } : {}),
+    };
 };
-
-const ANIMATABLE_TOKEN = new InjectionToken('ANIMATABLE_DIRECTIVE_TOKEN');
-class AnimatableDirective {
-    constructor() {
-        this._didEmitStart = false;
-        this._parent = inject(ANIMATABLE_TOKEN, { optional: true, skipSelf: true });
-        this._destroy$ = createDestroy();
-        this._elementRef = inject(ElementRef);
-        this._animationStart$ = new Subject();
-        this._animationEnd$ = new Subject();
-        this._animationCancelled$ = new Subject();
-        this._animatedElement$ = new BehaviorSubject(this._elementRef.nativeElement);
-        this.animationStart$ = this._animationStart$.asObservable().pipe(debounceTime(0));
-        this.animationEnd$ = this._animationEnd$.asObservable().pipe(debounceTime(0));
-        this.animationCancelled$ = this._animationCancelled$.asObservable().pipe(debounceTime(0));
-        this._hostActiveAnimationCount$ = new BehaviorSubject(0);
-        this._totalActiveAnimationCount$ = new BehaviorSubject(0);
-        this.isAnimating$ = this._totalActiveAnimationCount$.pipe(map((count) => count > 0), debounceTime(0));
+const ET_PROPERTY_REMOVED = Symbol('ET_PROPERTY_REMOVED');
+class RouterStateService {
+    get route$() {
+        return this._route$.asObservable().pipe(distinctUntilChanged());
     }
-    set animatedElement(value) {
-        let newElement = null;
-        if (value === null || value === undefined || value === '') {
-            newElement = this._elementRef.nativeElement;
-        }
-        else if (typeof value === 'string') {
-            const el = document.querySelector(value);
-            if (el) {
-                newElement = el;
-            }
-            else {
-                if (isDevMode()) {
-                    console.warn(`Element with selector ${value} not found. Animatable directive will use host element.`);
-                }
-                newElement = this._elementRef.nativeElement;
-            }
-        }
-        else {
-            newElement = value;
-        }
-        if (this._animatedElement$.value !== newElement) {
-            this._animatedElement$.next(newElement);
-        }
-    }
-    ngOnInit() {
-        this._animatedElement$
-            .pipe(tap((el) => {
-            this._totalActiveAnimationCount$.next(this._totalActiveAnimationCount$.value - this._hostActiveAnimationCount$.value);
-            this._hostActiveAnimationCount$.next(0);
-            merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart'))
-                .pipe(filter((e) => e.target === el), // skip events from children
-            tap(() => {
-                const count = this._hostActiveAnimationCount$.value + 1;
-                this._hostActiveAnimationCount$.next(count);
-                this._totalActiveAnimationCount$.next(count);
-            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
-                .subscribe();
-            merge(fromEvent(el, 'animationend'), fromEvent(el, 'animationcancel'), fromEvent(el, 'transitionend'), fromEvent(el, 'transitioncancel'))
-                .pipe(filter((e) => e.target === el), // skip events from children
-            tap(() => {
-                const count = this._hostActiveAnimationCount$.value - 1;
-                this._hostActiveAnimationCount$.next(count);
-                this._totalActiveAnimationCount$.next(count);
-            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
-                .subscribe();
-            merge(fromEvent(el, 'animationcancel'), fromEvent(el, 'transitioncancel'))
-                .pipe(filter((e) => e.target === el), // skip events from children
-            tap(() => {
-                this._animationCancelled$.next();
-            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
-                .subscribe();
-        }), takeUntil(this._destroy$))
-            .subscribe();
-        this._totalActiveAnimationCount$
-            .pipe(tap((count) => {
-            if (count > 0 && !this._didEmitStart) {
-                this._animationStart$.next();
-                this._didEmitStart = true;
-            }
-            else if (count === 0) {
-                this._animationEnd$.next();
-                this._didEmitStart = false;
-            }
-        }), takeUntil(this._destroy$))
-            .subscribe();
-        if (this._parent) {
-            this._parent._hostActiveAnimationCount$
-                .pipe(takeUntil(this._destroy$), tap((count) => {
-                this._totalActiveAnimationCount$.next(count + this._hostActiveAnimationCount$.value);
-            }))
-                .subscribe();
-        }
+    get route() {
+        return this._route$.getValue();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", inputs: { animatedElement: ["etAnimatable", "animatedElement"] }, providers: [
-            {
-                provide: ANIMATABLE_TOKEN,
-                useExisting: AnimatableDirective,
-            },
-        ], exportAs: ["etAnimatable"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etAnimatable]',
-                    exportAs: 'etAnimatable',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: ANIMATABLE_TOKEN,
-                            useExisting: AnimatableDirective,
-                        },
-                    ],
-                }]
-        }], propDecorators: { animatedElement: [{
-                type: Input,
-                args: ['etAnimatable']
-            }] } });
-
-const ANIMATED_LIFECYCLE_TOKEN = new InjectionToken('ANIMATED_LIFECYCLE_DIRECTIVE_TOKEN');
-const ANIMATION_CLASSES = {
-    enterFrom: 'et-animation-enter-from',
-    enterActive: 'et-animation-enter-active',
-    enterTo: 'et-animation-enter-to',
-    leaveFrom: 'et-animation-leave-from',
-    leaveActive: 'et-animation-leave-active',
-    leaveTo: 'et-animation-leave-to',
-};
-class AnimatedLifecycleDirective {
-    constructor() {
-        this._destroy$ = createDestroy();
-        this._elementRef = inject(ElementRef);
-        this._animatable = inject(ANIMATABLE_TOKEN);
-        this._classList = this._elementRef.nativeElement.classList;
-        this._isConstructed = false;
-        this._state$ = new BehaviorSubject('init');
-        this.state$ = this._state$.asObservable();
-        this.hostClassBindings = signalHostClasses({
-            'et-force-invisible': toSignal(this._state$.pipe(map((state) => state === 'init'))),
-        });
-        this.stateChange = outputFromObservable(this._state$);
-        this.skipNextEnter = model(false);
+    get state$() {
+        return this._state$.asObservable();
     }
     get state() {
-        return this._state$.value;
+        return this._state$.getValue();
     }
-    ngAfterViewInit() {
-        this._isConstructed = true;
+    get data$() {
+        return this._state$.pipe(map((state) => state.data), distinctUntilChanged((a, b) => equal(a, b)));
     }
-    enter(config) {
-        if (this.state === 'entering')
-            return;
-        if ((this.state === 'init' && !this._isConstructed) || this.skipNextEnter()) {
-            // Force the state to entered so that the element is not animated when it is first rendered.
-            this._forceState('entered');
-            this.skipNextEnter.set(false);
-            return;
-        }
-        if (this.state === 'leaving') {
-            this._classList.remove(ANIMATION_CLASSES.leaveFrom);
-            this._classList.remove(ANIMATION_CLASSES.leaveActive);
-            this._classList.remove(ANIMATION_CLASSES.leaveTo);
-        }
-        this._state$.next('entering');
-        if (!config?.onlyTransition) {
-            this._classList.add(ANIMATION_CLASSES.enterFrom);
-        }
-        forceReflow();
-        this._classList.add(ANIMATION_CLASSES.enterActive);
-        fromNextFrame()
-            .pipe(tap(() => {
-            if (!config?.onlyTransition && this.state === 'entering') {
-                this._classList.remove(ANIMATION_CLASSES.enterFrom);
-                this._classList.add(ANIMATION_CLASSES.enterTo);
+    get data() {
+        return this._state$.getValue().data;
+    }
+    get pathParams$() {
+        return this._state$.pipe(map((state) => state.pathParams), distinctUntilChanged((a, b) => equal(a, b)));
+    }
+    get pathParams() {
+        return this._state$.getValue().pathParams;
+    }
+    get queryParams$() {
+        return this._state$.pipe(map((state) => state.queryParams), distinctUntilChanged((a, b) => equal(a, b)));
+    }
+    get queryParams() {
+        return this._state$.getValue().queryParams;
+    }
+    get title$() {
+        return this._state$.pipe(map((state) => state.title), distinctUntilChanged());
+    }
+    get title() {
+        return this._state$.getValue().title;
+    }
+    get fragment$() {
+        return this._state$.pipe(map((state) => state.fragment), distinctUntilChanged());
+    }
+    get fragment() {
+        return this._state$.getValue().fragment;
+    }
+    get dataChanges$() {
+        return this.data$.pipe(pairwise(), map((v) => this._findChanges(v)), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    get queryParamChanges$() {
+        return this.queryParams$.pipe(pairwise(), map((v) => this._findChanges(v)), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    get pathParamChanges$() {
+        return this.pathParams$.pipe(pairwise(), map((v) => this._findChanges(v)), shareReplay({ bufferSize: 1, refCount: true }));
+    }
+    constructor() {
+        this._isScrollTopOnNavigationEnabled = false;
+        this._router = inject(Router);
+        this._route$ = new BehaviorSubject(window.location.pathname);
+        this._state$ = new BehaviorSubject(this._getInitialState());
+        this._afterInitialize$ = new BehaviorSubject(false);
+        this.afterInitialize$ = this._afterInitialize$.pipe(filter((v) => v));
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), distinctUntilChanged((a, b) => a.url === b.url), map((event) => {
+            const { url } = event;
+            const urlWithoutQueryParams = url.split('?')[0] ?? '';
+            const withoutFragment = urlWithoutQueryParams.split('#')[0] ?? '';
+            return withoutFragment;
+        }), tap(() => {
+            if (!this._afterInitialize$.getValue()) {
+                this._afterInitialize$.next(true);
             }
-        }), switchMap(() => this._animatable.animationEnd$), tap(() => {
-            if (this.state !== 'entering')
+        }))
+            .subscribe(this._route$);
+        combineLatest([this._route$, this._afterInitialize$])
+            .pipe(tap(([, afterInitialize]) => {
+            if (!afterInitialize)
                 return;
-            this._state$.next('entered');
-            this._classList.remove(ANIMATION_CLASSES.enterActive);
-            if (!config?.onlyTransition) {
-                this._classList.remove(ANIMATION_CLASSES.enterTo);
+            let route = this._router.routerState.snapshot.root;
+            while (route.firstChild) {
+                route = route.firstChild;
             }
-        }), takeUntil(this._destroy$), take(1))
+            const { data, params, queryParams, title, fragment } = route;
+            this._state$.next({
+                data,
+                pathParams: params,
+                queryParams,
+                title: title ?? null,
+                fragment,
+            });
+        }))
             .subscribe();
     }
-    leave(config) {
-        if (this.state === 'leaving')
-            return;
-        if (this.state === 'init') {
-            this._state$.next('left');
+    enableScrollEnhancements(config = {}) {
+        if (this._isScrollTopOnNavigationEnabled) {
             return;
         }
-        if (this.state === 'entering') {
-            this._classList.remove(ANIMATION_CLASSES.enterFrom);
-            this._classList.remove(ANIMATION_CLASSES.enterActive);
-            this._classList.remove(ANIMATION_CLASSES.enterTo);
-        }
-        this._state$.next('leaving');
-        if (!config?.onlyTransition) {
-            this._classList.add(ANIMATION_CLASSES.leaveFrom);
-        }
-        forceReflow();
-        this._classList.add(ANIMATION_CLASSES.leaveActive);
-        fromNextFrame()
-            .pipe(tap(() => {
-            if (!config?.onlyTransition && this.state === 'leaving') {
-                this._classList.remove(ANIMATION_CLASSES.leaveFrom);
-                this._classList.add(ANIMATION_CLASSES.leaveTo);
-            }
-        }), switchMap(() => this._animatable.animationEnd$), tap(() => {
-            if (this.state !== 'leaving')
-                return;
-            this._state$.next('left');
-            this._classList.remove(ANIMATION_CLASSES.leaveActive);
-            if (!config?.onlyTransition) {
-                this._classList.remove(ANIMATION_CLASSES.leaveTo);
-            }
-        }), takeUntil(this._destroy$), take(1))
-            .subscribe();
-    }
-    _forceState(state) {
-        this._state$.next(state);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.4", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", inputs: { skipNextEnter: { classPropertyName: "skipNextEnter", publicName: "skipNextEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", skipNextEnter: "skipNextEnterChange" }, providers: [
-            {
-                provide: ANIMATED_LIFECYCLE_TOKEN,
-                useExisting: AnimatedLifecycleDirective,
-            },
-        ], exportAs: ["etAnimatedLifecycle"], hostDirectives: [{ directive: AnimatableDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etAnimatedLifecycle]',
-                    exportAs: 'etAnimatedLifecycle',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: ANIMATED_LIFECYCLE_TOKEN,
-                            useExisting: AnimatedLifecycleDirective,
-                        },
-                    ],
-                    hostDirectives: [AnimatableDirective],
-                }]
-        }] });
-
-const ANIMATED_IF_TOKEN = new InjectionToken('ANIMATED_IF_TOKEN');
-class AnimatedIfDirective {
-    constructor() {
-        this._destroy$ = createDestroy();
-        this._ngIf = inject(NgIf);
-        this._animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
+        this._isScrollTopOnNavigationEnabled = true;
+        combineLatest([this._state$.pipe(pairwise()), this._route$.pipe(pairwise())])
+            .pipe(debounceTime(1))
+            .subscribe(([[prevState, currState], [prevRoute, currRoute]]) => {
+            const sameUrlNavigation = prevRoute === currRoute;
+            const didFragmentChange = prevState.fragment !== currState.fragment;
+            if (sameUrlNavigation) {
+                const allQueryParams = [
+                    ...new Set(Object.keys(prevState.queryParams).concat(Object.keys(currState.queryParams))),
+                ];
+                const changedQueryParams = allQueryParams.filter((key) => currState.queryParams[key] !== prevState.queryParams[key]);
+                if (!config.queryParamTriggerList?.length && !didFragmentChange) {
+                    return;
+                }
+                const caseQueryParams = changedQueryParams.some((key) => config.queryParamTriggerList?.includes(key));
+                const caseFragment = didFragmentChange && config.fragment?.enabled;
+                if (caseQueryParams) {
+                    (config.scrollElement ?? document.documentElement).scrollTop = 0;
+                }
+                else if (caseFragment) {
+                    const fragmentElement = document.getElementById(currState.fragment ?? '');
+                    if (fragmentElement) {
+                        fragmentElement.scrollIntoView({ behavior: config.fragment?.smooth ? 'smooth' : 'auto' });
+                    }
+                }
+            }
+            else {
+                const viaReturnRoute = currState.data[ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE] && prevState.data[ET_DISABLE_SCROLL_TOP];
+                const explicitly = currState.data[ET_DISABLE_SCROLL_TOP];
+                const pathParamsChange = currState.data[ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE];
+                if (viaReturnRoute || explicitly || pathParamsChange) {
+                    return;
+                }
+                const el = config.scrollElement ?? document.documentElement;
+                el.scrollTop = 0;
+            }
+        });
     }
-    set shouldRender(value) {
-        if (value) {
-            this._ngIf.ngIf = value;
-            this._animatedLifecycle.enter();
+    selectQueryParam(key) {
+        return this._state$.pipe(map((state) => state.queryParams[key]), distinctUntilChanged());
+    }
+    selectPathParam(key) {
+        return this._state$.pipe(map((state) => state.pathParams[key]), distinctUntilChanged());
+    }
+    selectData(key) {
+        return this._state$.pipe(map((state) => state.data[key]), distinctUntilChanged((a, b) => equal(a, b)));
+    }
+    _findChanges([previous, current,]) {
+        const changes = {};
+        const allKeys = new Set([
+            ...Object.keys(previous),
+            ...Object.keys(current),
+        ]);
+        for (const key of allKeys) {
+            if (!equal(previous[key], current[key])) {
+                const val = current[key] === undefined ? ET_PROPERTY_REMOVED : current[key];
+                changes[key] = val;
+            }
         }
-        else {
-            this._animatedLifecycle.leave();
-            this._animatedLifecycle.state$
-                .pipe(takeUntil(this._destroy$), takeWhile((state) => state !== 'left', true), filter((state) => state === 'left'), tap(() => {
-                this._ngIf.ngIf = value;
-            }))
-                .subscribe();
+        return changes;
+    }
+    _getInitialState() {
+        const data = {};
+        const pathParams = {};
+        const queryParams = {};
+        const title = null;
+        let fragment = null;
+        const currentQueryParams = window.location.search;
+        const currentFragment = window.location.hash;
+        if (currentQueryParams) {
+            const params = new URLSearchParams(currentQueryParams);
+            params.forEach((value, key) => {
+                queryParams[key] = value;
+            });
         }
+        if (currentFragment) {
+            fragment = currentFragment.slice(1);
+        }
+        return {
+            data,
+            pathParams,
+            queryParams,
+            title,
+            fragment,
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatedIfDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: AnimatedIfDirective, isStandalone: true, selector: "[etAnimatedIf]", inputs: { shouldRender: ["etAnimatedIf", "shouldRender"] }, providers: [
-            {
-                provide: ANIMATED_IF_TOKEN,
-                useExisting: AnimatedIfDirective,
-            },
-        ], hostDirectives: [{ directive: i1.NgIf }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RouterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RouterStateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatedIfDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RouterStateService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[etAnimatedIf]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: ANIMATED_IF_TOKEN,
-                            useExisting: AnimatedIfDirective,
-                        },
-                    ],
-                    hostDirectives: [NgIf],
+                    providedIn: 'root',
                 }]
-        }], propDecorators: { shouldRender: [{
-                type: Input,
-                args: ['etAnimatedIf']
-            }] } });
+        }], ctorParameters: () => [] });
 
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-class ClickObserverFactory {
-    create() {
-        return fromEvent(document, 'click');
+class ViewportService {
+    get isXs$() {
+        return this._isXs$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickObserverFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickObserverFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class ClickObserverService {
-    constructor() {
-        this._clickObserverFactory = inject(ClickObserverFactory);
-        this._observedElements = new Map();
+    get isXs() {
+        return this._isXs$.value;
     }
-    ngOnDestroy() {
-        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    get isSm$() {
+        return this._isSm$.asObservable();
     }
-    observe(elementOrRef) {
-        const element = coerceElement(elementOrRef);
-        return new Observable((observer) => {
-            const stream = this._observeElement(element);
-            const subscription = stream.subscribe(observer);
-            return () => {
-                subscription.unsubscribe();
-                this._unobserveElement(element);
-            };
-        });
+    get isSm() {
+        return this._isSm$.value;
     }
-    _observeElement(element) {
-        if (!this._observedElements.has(element)) {
-            const stream = new Subject();
-            const observer = this._clickObserverFactory.create();
-            const sub = observer.subscribe((event) => stream.next(event));
-            this._observedElements.set(element, { observer: sub, stream, count: 1 });
-        }
-        else {
-            this._observedElements.get(element).count++;
-        }
-        return this._observedElements.get(element).stream;
+    get isMd$() {
+        return this._isMd$.asObservable();
     }
-    _unobserveElement(element) {
-        if (this._observedElements.has(element)) {
-            this._observedElements.get(element).count--;
-            if (!this._observedElements.get(element).count) {
-                this._cleanupObserver(element);
-            }
-        }
+    get isMd() {
+        return this._isMd$.value;
     }
-    _cleanupObserver(element) {
-        if (this._observedElements.has(element)) {
-            const { observer, stream } = this._observedElements.get(element);
-            if (observer) {
-                observer.unsubscribe();
-            }
-            stream.complete();
-            this._observedElements.delete(element);
-        }
+    get isLg$() {
+        return this._isLg$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickObserverService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-class MutationObserverFactory {
-    create(callback) {
-        return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
+    get isLg() {
+        return this._isLg$.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MutationObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MutationObserverFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: MutationObserverFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class ContentObserverService {
-    constructor() {
-        this._mutationObserverFactory = inject(MutationObserverFactory);
-        this._observedElements = new Map();
+    get isXl$() {
+        return this._isXl$.asObservable();
     }
-    ngOnDestroy() {
-        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    get isXl() {
+        return this._isXl$.value;
     }
-    observe(elementOrRef) {
-        const element = coerceElement(elementOrRef);
-        return new Observable((observer) => {
-            const stream = this._observeElement(element);
-            const subscription = stream.subscribe(observer);
-            return () => {
-                subscription.unsubscribe();
-                this._unobserveElement(element);
-            };
-        });
+    get is2Xl$() {
+        return this._is2Xl$.asObservable();
     }
-    _observeElement(element) {
-        if (!this._observedElements.has(element)) {
-            const stream = new Subject();
-            const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
-            if (observer) {
-                observer.observe(element, {
-                    characterData: true,
-                    childList: true,
-                    subtree: true,
-                });
-            }
-            this._observedElements.set(element, { observer, stream, count: 1 });
-        }
-        else {
-            this._observedElements.get(element).count++;
-        }
-        return this._observedElements.get(element).stream;
+    get is2Xl() {
+        return this._is2Xl$.value;
     }
-    _unobserveElement(element) {
-        if (this._observedElements.has(element)) {
-            this._observedElements.get(element).count--;
-            if (!this._observedElements.get(element).count) {
-                this._cleanupObserver(element);
-            }
-        }
+    get viewportSize$() {
+        return this._viewportSize$.asObservable();
     }
-    _cleanupObserver(element) {
-        if (this._observedElements.has(element)) {
-            const { observer, stream } = this._observedElements.get(element);
-            if (observer) {
-                observer.disconnect();
-            }
-            stream.complete();
-            this._observedElements.delete(element);
-        }
+    get viewportSize() {
+        return this._viewportSize$.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ContentObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ContentObserverService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ContentObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class FocusVisibleService {
-    get isFocusVisible() {
-        return this._hadKeyboardEvent;
+    get scrollbarSize$() {
+        return this._scrollbarSize$.asObservable();
+    }
+    get scrollbarSize() {
+        return this._scrollbarSize$.value;
+    }
+    get currentViewport() {
+        return this.getCurrentViewport([this.isXs, this.isSm, this.isMd, this.isLg, this.isXl, this.is2Xl]);
     }
     constructor() {
-        this._document = inject(DOCUMENT);
-        this._hadKeyboardEvent = false;
-        this._document.addEventListener('keydown', this.onKeyDown.bind(this), true);
-        this._document.addEventListener('mousedown', this.onPointerDown.bind(this), true);
-        this._document.addEventListener('pointerdown', this.onPointerDown.bind(this), true);
-        this._document.addEventListener('touchstart', this.onPointerDown.bind(this), true);
+        this._resizeObserverService = inject(ResizeObserverService);
+        this._viewportConfig = inject(VIEWPORT_CONFIG, { optional: true }) || DEFAULT_VIEWPORT_CONFIG;
+        this._breakpointObserver = inject(BreakpointObserver);
+        this._viewportMonitorStop$ = new Subject();
+        this._isViewportMonitorEnabled = false;
+        this._isXs$ = new BehaviorSubject(false);
+        this._isSm$ = new BehaviorSubject(false);
+        this._isMd$ = new BehaviorSubject(false);
+        this._isLg$ = new BehaviorSubject(false);
+        this._isXl$ = new BehaviorSubject(false);
+        this._is2Xl$ = new BehaviorSubject(false);
+        this._viewportSize$ = new BehaviorSubject(null);
+        this._scrollbarSize$ = new BehaviorSubject(null);
+        this.currentViewport$ = combineLatest([this.isXs$, this.isSm$, this.isMd$, this.isLg$, this.isXl$, this.is2Xl$]).pipe(map((val) => this.getCurrentViewport(val)), debounceTime(0), shareReplay({ bufferSize: 1, refCount: true }));
+        this._observeDefaultBreakpoints();
     }
-    onKeyDown(e) {
-        if (e.metaKey || e.altKey || e.ctrlKey) {
-            return;
-        }
-        this._hadKeyboardEvent = true;
+    observe(options) {
+        const mediaQuery = this._buildMediaQuery(options);
+        return this._breakpointObserver.observe(mediaQuery).pipe(map((x) => x.matches), shareReplay({ bufferSize: 1, refCount: true }));
     }
-    onPointerDown() {
-        this._hadKeyboardEvent = false;
+    isMatched(options) {
+        const mediaQuery = this._buildMediaQuery(options);
+        return this._breakpointObserver.isMatched(mediaQuery);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FocusVisibleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FocusVisibleService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: FocusVisibleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-class IntersectionObserverFactory {
-    create(callback) {
-        return typeof IntersectionObserver === 'undefined' ? null : new IntersectionObserver(callback);
+    /**
+     * Applies size CSS variables to the documentElement in pixels.
+     * - `--et-vw`: viewport width excluding scrollbar width
+     * - `--et-vh`: viewport height excluding scrollbar height
+     * - `--et-sw`: scrollbar width
+     * - `--et-sh`: scrollbar height
+     */
+    monitorViewport() {
+        if (this._isViewportMonitorEnabled)
+            return;
+        this._isViewportMonitorEnabled = true;
+        this._resizeObserverService
+            .observe(document.documentElement)
+            .pipe(tap((e) => {
+            const entry = e[0];
+            if (!entry)
+                return;
+            const width = entry.contentRect.width;
+            const height = entry.contentRect.height;
+            const obj = { width, height };
+            if (equal(obj, this._viewportSize$.value))
+                return;
+            document.documentElement.style.setProperty('--et-vw', `${obj.width}px`);
+            document.documentElement.style.setProperty('--et-vh', `${obj.height}px`);
+            this._viewportSize$.next(obj);
+        }), finalize(() => {
+            document.documentElement.style.removeProperty('--et-vw');
+            document.documentElement.style.removeProperty('--et-vh');
+            this._viewportSize$.next(null);
+        }), takeUntil(this._viewportMonitorStop$))
+            .subscribe();
+        const scrollbarRuler = document.createElement('div');
+        scrollbarRuler.style.width = '100px';
+        scrollbarRuler.style.height = '100px';
+        scrollbarRuler.style.overflow = 'scroll';
+        scrollbarRuler.style.position = 'absolute';
+        scrollbarRuler.style.top = '-9999px';
+        document.body.appendChild(scrollbarRuler);
+        this._resizeObserverService
+            .observe(scrollbarRuler)
+            .pipe(tap((e) => {
+            const entry = e[0];
+            if (!entry)
+                return;
+            const size = entry.contentRect.width;
+            const obj = { width: 100 - size, height: 100 - size };
+            if (equal(obj, this._scrollbarSize$.value))
+                return;
+            document.documentElement.style.setProperty('--et-sw', `${obj.width}px`);
+            document.documentElement.style.setProperty('--et-sh', `${obj.height}px`);
+            this._scrollbarSize$.next(obj);
+        }), finalize(() => {
+            document.body.removeChild(scrollbarRuler);
+            document.documentElement.style.removeProperty('--et-vw');
+            document.documentElement.style.removeProperty('--et-vh');
+            this._scrollbarSize$.next(null);
+        }), takeUntil(this._viewportMonitorStop$))
+            .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IntersectionObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IntersectionObserverFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IntersectionObserverFactory, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class IntersectionObserverService {
-    constructor() {
-        this._intersectionObserverFactory = inject(IntersectionObserverFactory);
-        this._observedElements = new Map();
+    unmonitorViewport() {
+        this._viewportMonitorStop$.next();
+        this._isViewportMonitorEnabled = false;
     }
-    ngOnDestroy() {
-        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    getBreakpointSize(type, option) {
+        const index = option === 'min' ? 0 : 1;
+        const size = this._viewportConfig.breakpoints[type][index];
+        if (size === Infinity || size === 0) {
+            return size;
+        }
+        if (option === 'min') {
+            return size;
+        }
+        // Due to scaling, the actual size of the viewport may be a decimal number.
+        // Eg. on Windows 11 with 150% scaling, the viewport size may be 1535.33px
+        // and thus not matching any of the default breakpoints.
+        return size + 0.9;
     }
-    observe(elementOrRef) {
-        const element = coerceElement(elementOrRef);
-        return new Observable((observer) => {
-            const stream = this._observeElement(element);
-            const subscription = stream.subscribe(observer);
-            return () => {
-                subscription.unsubscribe();
-                this._unobserveElement(element);
-            };
-        });
+    _observeDefaultBreakpoints() {
+        this.observe({ max: 'xs' }).subscribe(this._isXs$);
+        this.observe({ min: 'sm', max: 'sm' }).subscribe(this._isSm$);
+        this.observe({ min: 'md', max: 'md' }).subscribe(this._isMd$);
+        this.observe({ min: 'lg', max: 'lg' }).subscribe(this._isLg$);
+        this.observe({ min: 'xl', max: 'xl' }).subscribe(this._isXl$);
+        this.observe({ min: '2xl' }).subscribe(this._is2Xl$);
     }
-    _observeElement(element) {
-        if (!this._observedElements.has(element)) {
-            const stream = new Subject();
-            const observer = this._intersectionObserverFactory.create((mutations) => stream.next(mutations));
-            if (observer) {
-                observer.observe(element);
+    _buildMediaQuery(options) {
+        if (!options.min && !options.max) {
+            throw new Error('At least one of min or max must be defined');
+        }
+        const mediaQueryParts = [];
+        if (options.min) {
+            if (typeof options.min === 'number') {
+                mediaQueryParts.push(`(min-width: ${options.min}px)`);
+            }
+            else {
+                mediaQueryParts.push(`(min-width: ${this.getBreakpointSize(options.min, 'min')}px)`);
             }
-            this._observedElements.set(element, { observer, stream, count: 1 });
         }
-        else {
-            this._observedElements.get(element).count++;
+        if (options.min && options.max) {
+            mediaQueryParts.push('and');
         }
-        return this._observedElements.get(element).stream;
-    }
-    _unobserveElement(element) {
-        if (this._observedElements.has(element)) {
-            this._observedElements.get(element).count--;
-            if (!this._observedElements.get(element).count) {
-                this._cleanupObserver(element);
+        if (options.max) {
+            if (typeof options.max === 'number') {
+                mediaQueryParts.push(`(max-width: ${options.max}px)`);
+            }
+            else {
+                mediaQueryParts.push(`(max-width: ${this.getBreakpointSize(options.max, 'max')}px)`);
             }
         }
+        return mediaQueryParts.join(' ');
     }
-    _cleanupObserver(element) {
-        if (this._observedElements.has(element)) {
-            const { observer, stream } = this._observedElements.get(element);
-            if (observer) {
-                observer.disconnect();
-            }
-            stream.complete();
-            this._observedElements.delete(element);
+    getCurrentViewport([isXs, isSm, isMd, isLg, isXl, is2Xl]) {
+        if (isXs) {
+            return 'xs';
+        }
+        else if (isSm) {
+            return 'sm';
+        }
+        else if (isMd) {
+            return 'md';
+        }
+        else if (isLg) {
+            return 'lg';
         }
+        else if (isXl) {
+            return 'xl';
+        }
+        else if (is2Xl) {
+            return '2xl';
+        }
+        return 'xs';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IntersectionObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IntersectionObserverService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ViewportService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IntersectionObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-class ResizeObserverFactory {
-    create(callback) {
-        return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ResizeObserverFactory, decorators: [{
+__decorate([
+    Memo(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, String]),
+    __metadata("design:returntype", void 0)
+], ViewportService.prototype, "getBreakpointSize", null);
+__decorate([
+    Memo({
+        resolver: (v) => {
+            return `${v.min ?? ''}-${v.max ?? ''}`;
+        },
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], ViewportService.prototype, "_buildMediaQuery", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ViewportService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-class ResizeObserverService {
-    constructor() {
-        this._mutationObserverFactory = inject(ResizeObserverFactory);
-        this._observedElements = new Map();
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [], propDecorators: { getBreakpointSize: [], _buildMediaQuery: [] } });
+
+function isElementSignal(el) {
+    if (isSignal(el)) {
+        const val = el();
+        return typeof val === 'object' && val !== null && 'currentElement' in val && 'previousElement' in val;
     }
-    ngOnDestroy() {
-        this._observedElements.forEach((_, element) => this._cleanupObserver(element));
+    return false;
+}
+const documentElementSignal = () => signal({
+    currentElement: document.documentElement,
+    previousElement: null,
+    currentElements: [document.documentElement],
+    previousElements: [],
+});
+const buildElementSignal = (el) => {
+    if (el === null || el === undefined) {
+        return signal({ currentElement: null, previousElement: null, currentElements: [], previousElements: [] });
     }
-    observe(elementOrRef) {
-        const element = coerceElement(elementOrRef);
-        return new Observable((observer) => {
-            const stream = this._observeElement(element);
-            const subscription = stream.subscribe(observer);
-            return () => {
-                subscription.unsubscribe();
-                this._unobserveElement(element);
-            };
-        });
+    if (isElementSignal(el)) {
+        return el;
     }
-    _observeElement(element) {
-        if (!this._observedElements.has(element)) {
-            const stream = new Subject();
-            const observer = this._mutationObserverFactory.create((resizes) => stream.next(resizes));
-            if (observer) {
-                observer.observe(element);
-            }
-            this._observedElements.set(element, { observer, stream, count: 1 });
+    let mElSignal = null;
+    const switchElement = () => switchMap((elOrRef) => {
+        if (elOrRef instanceof QueryList) {
+            return elOrRef.changes.pipe(startWith(elOrRef), map(() => elOrRef.toArray().map((r) => coerceElement(r))));
+        }
+        else if (Array.isArray(elOrRef)) {
+            return of(elOrRef.map((r) => coerceElement(r)));
         }
         else {
-            this._observedElements.get(element).count++;
+            const coercedEl = coerceElement(elOrRef);
+            return of(coercedEl ? [coercedEl] : null);
         }
-        return this._observedElements.get(element).stream;
+    });
+    if (el instanceof Observable) {
+        mElSignal = toSignal(el.pipe(switchElement()), { initialValue: null });
     }
-    _unobserveElement(element) {
-        if (this._observedElements.has(element)) {
-            this._observedElements.get(element).count--;
-            if (!this._observedElements.get(element).count) {
-                this._cleanupObserver(element);
-            }
-        }
+    else if (isSignal(el)) {
+        mElSignal = toSignal(toObservable(el).pipe(switchElement()), { initialValue: null });
     }
-    _cleanupObserver(element) {
-        if (this._observedElements.has(element)) {
-            const { observer, stream } = this._observedElements.get(element);
-            if (observer) {
-                observer.disconnect();
-            }
-            stream.complete();
-            this._observedElements.delete(element);
-        }
+    else if (el instanceof QueryList) {
+        mElSignal = toSignal(el.changes.pipe(startWith(el), map(() => el.toArray().map((r) => coerceElement(r)))), { initialValue: null });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ResizeObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ResizeObserverService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-const ET_DISABLE_SCROLL_TOP = Symbol('ET_DISABLE_SCROLL_TOP');
-const ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE = Symbol('ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE');
-const ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE = Symbol('ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE');
-const routerDisableScrollTop = (config = {}) => {
-    return {
-        ...(!config.asReturnRoute ? { [ET_DISABLE_SCROLL_TOP]: true } : { [ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE]: true }),
-        ...(config.onPathParamChange ? { [ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE]: true } : {}),
+    else {
+        mElSignal = signal([coerceElement(el)]);
+    }
+    return toSignal(toObservable(mElSignal).pipe(startWith(null), pairwise(), map(([previousElements, currentElements]) => ({
+        previousElements: previousElements ?? [],
+        currentElements: currentElements ?? [],
+        currentElement: currentElements?.[0] ?? null,
+        previousElement: previousElements?.[0] ?? null,
+    }))), { initialValue: { currentElement: null, previousElement: null, previousElements: [], currentElements: [] } });
+};
+const buildSignalEffects = (config) => {
+    const injector = inject(Injector);
+    const { map, eachItemFn, cleanupFn } = config;
+    const effectRefMap = {};
+    const has = (token) => token in effectRefMap;
+    const push = (tokenString, signal) => {
+        if (has(tokenString))
+            return;
+        const tokenArray = tokenString.split(' ').filter((token) => !!token);
+        for (const token of tokenArray) {
+            runInInjectionContext(injector, () => {
+                const ref = effect(() => {
+                    const value = signal();
+                    eachItemFn({ key: token, value });
+                });
+                effectRefMap[token] = ref;
+            });
+        }
+    };
+    const pushMany = (map) => {
+        for (const [tokenString, signal] of Object.entries(map)) {
+            push(tokenString, signal);
+        }
+    };
+    const remove = (...tokens) => {
+        for (const tokenString of tokens) {
+            effectRefMap[tokenString]?.destroy();
+            cleanupFn({ key: tokenString, value: map[tokenString]?.() });
+            delete effectRefMap[tokenString];
+        }
     };
+    const removeMany = (tokens) => {
+        for (const token of tokens) {
+            remove(token);
+        }
+    };
+    pushMany(map);
+    return { remove, removeMany, has, push, pushMany };
 };
-const ET_PROPERTY_REMOVED = Symbol('ET_PROPERTY_REMOVED');
-class RouterStateService {
-    get route$() {
-        return this._route$.asObservable().pipe(distinctUntilChanged());
-    }
-    get route() {
-        return this._route$.getValue();
-    }
-    get state$() {
-        return this._state$.asObservable();
-    }
-    get state() {
-        return this._state$.getValue();
-    }
-    get data$() {
-        return this._state$.pipe(map((state) => state.data), distinctUntilChanged((a, b) => equal(a, b)));
-    }
-    get data() {
-        return this._state$.getValue().data;
-    }
-    get pathParams$() {
-        return this._state$.pipe(map((state) => state.pathParams), distinctUntilChanged((a, b) => equal(a, b)));
-    }
-    get pathParams() {
-        return this._state$.getValue().pathParams;
-    }
-    get queryParams$() {
-        return this._state$.pipe(map((state) => state.queryParams), distinctUntilChanged((a, b) => equal(a, b)));
-    }
-    get queryParams() {
-        return this._state$.getValue().queryParams;
-    }
-    get title$() {
-        return this._state$.pipe(map((state) => state.title), distinctUntilChanged());
-    }
-    get title() {
-        return this._state$.getValue().title;
-    }
-    get fragment$() {
-        return this._state$.pipe(map((state) => state.fragment), distinctUntilChanged());
-    }
-    get fragment() {
-        return this._state$.getValue().fragment;
-    }
-    get dataChanges$() {
-        return this.data$.pipe(pairwise(), map((v) => this._findChanges(v)), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    get queryParamChanges$() {
-        return this.queryParams$.pipe(pairwise(), map((v) => this._findChanges(v)), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    get pathParamChanges$() {
-        return this.pathParams$.pipe(pairwise(), map((v) => this._findChanges(v)), shareReplay({ bufferSize: 1, refCount: true }));
-    }
-    constructor() {
-        this._isScrollTopOnNavigationEnabled = false;
-        this._router = inject(Router);
-        this._route$ = new BehaviorSubject(window.location.pathname);
-        this._state$ = new BehaviorSubject(this._getInitialState());
-        this._afterInitialize$ = new BehaviorSubject(false);
-        this.afterInitialize$ = this._afterInitialize$.pipe(filter((v) => v));
-        this._router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), distinctUntilChanged((a, b) => a.url === b.url), map((event) => {
-            const { url } = event;
-            const urlWithoutQueryParams = url.split('?')[0] ?? '';
-            const withoutFragment = urlWithoutQueryParams.split('#')[0] ?? '';
-            return withoutFragment;
-        }), tap(() => {
-            if (!this._afterInitialize$.getValue()) {
-                this._afterInitialize$.next(true);
+const signalIsRendered = () => {
+    const isRendered = signal(false);
+    afterNextRender(() => isRendered.set(true));
+    return isRendered.asReadonly();
+};
+const signalClasses = (el, classMap) => {
+    const elements = buildElementSignal(el);
+    return buildSignalEffects({
+        map: classMap,
+        eachItemFn: ({ key, value }) => {
+            if (value) {
+                elements().currentElement?.classList.add(key);
             }
-        }))
-            .subscribe(this._route$);
-        combineLatest([this._route$, this._afterInitialize$])
-            .pipe(tap(([, afterInitialize]) => {
-            if (!afterInitialize)
+            else {
+                elements().currentElement?.classList.remove(key);
+            }
+        },
+        cleanupFn: ({ key }) => elements().currentElement?.classList.remove(key),
+    });
+};
+const signalHostClasses = (classMap) => signalClasses(inject(ElementRef), classMap);
+const ALWAYS_TRUE_ATTRIBUTE_KEYS = ['disabled', 'readonly', 'required', 'checked', 'selected', 'hidden', 'inert'];
+const signalAttributes = (el, attributeMap) => {
+    const elements = buildElementSignal(el);
+    return buildSignalEffects({
+        map: attributeMap,
+        eachItemFn: ({ key, value }) => {
+            const valueString = `${value}`;
+            if (ALWAYS_TRUE_ATTRIBUTE_KEYS.includes(key)) {
+                if (value) {
+                    elements().currentElement?.setAttribute(key, '');
+                }
+                else {
+                    elements().currentElement?.removeAttribute(key);
+                }
+            }
+            else {
+                if (value === null || value === undefined) {
+                    elements().currentElement?.removeAttribute(key);
+                }
+                else {
+                    elements().currentElement?.setAttribute(key, valueString);
+                }
+            }
+        },
+        cleanupFn: ({ key }) => elements().currentElement?.removeAttribute(key),
+    });
+};
+const signalHostAttributes = (attributeMap) => signalAttributes(inject(ElementRef), attributeMap);
+const signalStyles = (el, styleMap) => {
+    const elements = buildElementSignal(el);
+    return buildSignalEffects({
+        map: styleMap,
+        eachItemFn: ({ key, value }) => {
+            if (value === null || value === undefined) {
+                elements().currentElement?.style.removeProperty(key);
+            }
+            else {
+                const valueString = `${value}`;
+                elements().currentElement?.style.setProperty(key, valueString);
+            }
+        },
+        cleanupFn: ({ key }) => elements().currentElement?.style.removeProperty(key),
+    });
+};
+const signalHostStyles = (styleMap) => signalStyles(inject(ElementRef), styleMap);
+const signalElementDimensions = (el) => {
+    const destroyRef = inject(DestroyRef);
+    const elements = buildElementSignal(el);
+    const zone = inject(NgZone);
+    const isRendered = signalIsRendered();
+    const initialValue = () => ({
+        rect: elements().currentElement?.getBoundingClientRect() ?? null,
+        borderBoxSize: null,
+        contentBoxSize: null,
+        devicePixelContentBoxSize: null,
+    });
+    const elementDimensionsSignal = signal(initialValue());
+    const observer = new ResizeObserver((e) => {
+        if (!isRendered())
+            return;
+        const entry = e[0];
+        if (entry) {
+            const devicePixelContentBoxSize = entry.devicePixelContentBoxSize?.[0] ?? null;
+            const borderBoxSize = entry.borderBoxSize?.[0] ?? null;
+            const contentBoxSize = entry.contentBoxSize?.[0] ?? null;
+            zone.run(() => elementDimensionsSignal.set({
+                rect: entry.contentRect,
+                borderBoxSize: borderBoxSize
+                    ? { inlineSize: borderBoxSize.inlineSize, blockSize: borderBoxSize.blockSize }
+                    : null,
+                contentBoxSize: contentBoxSize
+                    ? { inlineSize: contentBoxSize.inlineSize, blockSize: contentBoxSize.blockSize }
+                    : null,
+                devicePixelContentBoxSize: devicePixelContentBoxSize
+                    ? { inlineSize: devicePixelContentBoxSize.inlineSize, blockSize: devicePixelContentBoxSize.blockSize }
+                    : null,
+            }));
+        }
+    });
+    effect(() => {
+        const els = elements();
+        elementDimensionsSignal.set(initialValue());
+        if (els.previousElement) {
+            observer.disconnect();
+        }
+        if (els.currentElement) {
+            const computedDisplay = getComputedStyle(els.currentElement).display;
+            const currentElIsAngularComponent = els.currentElement?.tagName.toLowerCase().includes('-');
+            if (computedDisplay === 'inline' && isDevMode() && currentElIsAngularComponent) {
+                console.error(`Element <${els.currentElement?.tagName.toLowerCase()}> is an Angular component and has a display of 'inline'. Inline elements cannot be observed for dimensions. Please change it to 'block' or something else.`);
+            }
+            observer.observe(els.currentElement);
+        }
+    }, { allowSignalWrites: true });
+    destroyRef.onDestroy(() => observer.disconnect());
+    return elementDimensionsSignal.asReadonly();
+};
+const signalHostElementDimensions = () => signalElementDimensions(inject(ElementRef));
+const signalElementMutations = (el, options) => {
+    const destroyRef = inject(DestroyRef);
+    const elements = buildElementSignal(el);
+    const zone = inject(NgZone);
+    const isRendered = signalIsRendered();
+    const elementMutationsSignal = signal(null);
+    const observer = new MutationObserver((e) => {
+        if (!isRendered())
+            return;
+        const entry = e[0];
+        if (entry) {
+            zone.run(() => elementMutationsSignal.set(entry));
+        }
+    });
+    effect(() => {
+        const els = elements();
+        elementMutationsSignal.set(null);
+        if (els.previousElement) {
+            observer.disconnect();
+        }
+        if (els.currentElement) {
+            observer.observe(els.currentElement, options);
+        }
+    }, { allowSignalWrites: true });
+    destroyRef.onDestroy(() => observer.disconnect());
+    return elementMutationsSignal.asReadonly();
+};
+const signalHostElementMutations = (options) => signalElementMutations(inject(ElementRef), options);
+const signalElementScrollState = (el) => {
+    const elements = buildElementSignal(el);
+    const elementDimensions = signalElementDimensions(elements);
+    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true });
+    const isRendered = signalIsRendered();
+    return computed(() => {
+        const element = elements().currentElement;
+        const dimensions = elementDimensions();
+        const notScrollable = () => ({
+            canScroll: false,
+            canScrollHorizontally: false,
+            canScrollVertically: false,
+            scrollWidth: element?.scrollWidth ?? null,
+            scrollHeight: element?.scrollHeight ?? null,
+            elementDimensions: dimensions,
+        });
+        // We are not interested what the mutation is, just that there is one.
+        // Changes to the DOM can affect the scroll state of the element.
+        elementMutations();
+        if (!element || !dimensions.rect || !isRendered())
+            return notScrollable();
+        const { scrollWidth, scrollHeight } = element;
+        const { width, height } = dimensions.rect;
+        const canScrollHorizontally = scrollWidth > width;
+        const canScrollVertically = scrollHeight > height;
+        return {
+            canScroll: canScrollHorizontally || canScrollVertically,
+            canScrollHorizontally,
+            canScrollVertically,
+            scrollWidth,
+            scrollHeight,
+            elementDimensions: dimensions,
+        };
+    });
+};
+const signalHostElementScrollState = () => signalElementScrollState(inject(ElementRef));
+const signalElementIntersection = (el, options) => {
+    const destroyRef = inject(DestroyRef);
+    const elements = buildElementSignal(el);
+    const root = options?.root ? buildElementSignal(options?.root) : documentElementSignal();
+    const zone = inject(NgZone);
+    const isRendered = signalIsRendered();
+    const isEnabled = options?.enabled ?? signal(true);
+    const elementIntersectionSignal = signal([]);
+    const observer = signal(null);
+    effect(() => {
+        const rootEl = root().currentElement;
+        untracked(() => observer()?.disconnect());
+        const newObserver = new IntersectionObserver((entries) => {
+            if (!isRendered())
                 return;
-            let route = this._router.routerState.snapshot.root;
-            while (route.firstChild) {
-                route = route.firstChild;
-            }
-            const { data, params, queryParams, title, fragment } = route;
-            this._state$.next({
-                data,
-                pathParams: params,
-                queryParams,
-                title: title ?? null,
-                fragment,
-            });
-        }))
-            .subscribe();
-    }
-    enableScrollEnhancements(config = {}) {
-        if (this._isScrollTopOnNavigationEnabled) {
-            return;
-        }
-        this._isScrollTopOnNavigationEnabled = true;
-        combineLatest([this._state$.pipe(pairwise()), this._route$.pipe(pairwise())])
-            .pipe(debounceTime(1))
-            .subscribe(([[prevState, currState], [prevRoute, currRoute]]) => {
-            const sameUrlNavigation = prevRoute === currRoute;
-            const didFragmentChange = prevState.fragment !== currState.fragment;
-            if (sameUrlNavigation) {
-                const allQueryParams = [
-                    ...new Set(Object.keys(prevState.queryParams).concat(Object.keys(currState.queryParams))),
-                ];
-                const changedQueryParams = allQueryParams.filter((key) => currState.queryParams[key] !== prevState.queryParams[key]);
-                if (!config.queryParamTriggerList?.length && !didFragmentChange) {
-                    return;
-                }
-                const caseQueryParams = changedQueryParams.some((key) => config.queryParamTriggerList?.includes(key));
-                const caseFragment = didFragmentChange && config.fragment?.enabled;
-                if (caseQueryParams) {
-                    (config.scrollElement ?? document.documentElement).scrollTop = 0;
+            let currentValues = untracked(() => [...elementIntersectionSignal()]);
+            for (const entry of entries) {
+                const existingEntryIndex = currentValues.findIndex((v) => v.target === entry.target);
+                if (existingEntryIndex !== -1) {
+                    currentValues = [
+                        ...currentValues.slice(0, existingEntryIndex),
+                        entry,
+                        ...currentValues.slice(existingEntryIndex + 1),
+                    ];
                 }
-                else if (caseFragment) {
-                    const fragmentElement = document.getElementById(currState.fragment ?? '');
-                    if (fragmentElement) {
-                        fragmentElement.scrollIntoView({ behavior: config.fragment?.smooth ? 'smooth' : 'auto' });
-                    }
+                else {
+                    currentValues = [...currentValues, entry];
                 }
             }
-            else {
-                const viaReturnRoute = currState.data[ET_DISABLE_SCROLL_TOP_AS_RETURN_ROUTE] && prevState.data[ET_DISABLE_SCROLL_TOP];
-                const explicitly = currState.data[ET_DISABLE_SCROLL_TOP];
-                const pathParamsChange = currState.data[ET_DISABLE_SCROLL_TOP_ON_PATH_PARAM_CHANGE];
-                if (viaReturnRoute || explicitly || pathParamsChange) {
-                    return;
-                }
-                const el = config.scrollElement ?? document.documentElement;
-                el.scrollTop = 0;
+            zone.run(() => elementIntersectionSignal.set(currentValues));
+        }, { ...options, root: rootEl });
+        observer.set(newObserver);
+    }, { allowSignalWrites: true });
+    effect(() => {
+        const els = elements();
+        const obs = observer();
+        const enabled = isEnabled();
+        elementIntersectionSignal.set([]);
+        if (els.previousElements.length) {
+            obs?.disconnect();
+        }
+        if (els.currentElements.length && !!enabled) {
+            for (const el of els.currentElements) {
+                obs?.observe(el);
             }
-        });
-    }
-    selectQueryParam(key) {
-        return this._state$.pipe(map((state) => state.queryParams[key]), distinctUntilChanged());
-    }
-    selectPathParam(key) {
-        return this._state$.pipe(map((state) => state.pathParams[key]), distinctUntilChanged());
-    }
-    selectData(key) {
-        return this._state$.pipe(map((state) => state.data[key]), distinctUntilChanged((a, b) => equal(a, b)));
-    }
-    _findChanges([previous, current,]) {
-        const changes = {};
-        const allKeys = new Set([
-            ...Object.keys(previous),
-            ...Object.keys(current),
-        ]);
-        for (const key of allKeys) {
-            if (!equal(previous[key], current[key])) {
-                const val = current[key] === undefined ? ET_PROPERTY_REMOVED : current[key];
-                changes[key] = val;
+        }
+    }, { allowSignalWrites: true });
+    destroyRef.onDestroy(() => observer()?.disconnect());
+    return elementIntersectionSignal;
+};
+const signalHostElementIntersection = (options) => signalElementIntersection(inject(ElementRef), options);
+const signalElementChildren = (el) => {
+    const elements = buildElementSignal(el);
+    const isRendered = signalIsRendered();
+    const elementMutations = signalElementMutations(elements, { childList: true, subtree: true, attributes: true });
+    return computed(() => {
+        if (!isRendered())
+            return [];
+        const els = elements();
+        // We are not interested what the mutation is, just that there is one.
+        // Changes to the DOM may affect the children of the element.
+        elementMutations();
+        if (!els.currentElement)
+            return [];
+        const children = [];
+        for (let index = 0; index < els.currentElement.children.length; index++) {
+            const element = els.currentElement.children[index];
+            if (element instanceof HTMLElement) {
+                children.push(element);
             }
         }
-        return changes;
+        return children;
+    });
+};
+const previousSignalValue = (signal) => {
+    const obs = toObservable(signal).pipe(pairwise(), map(([prev]) => prev));
+    return toSignal(obs);
+};
+const syncSignal = (from, to) => {
+    effect(() => {
+        const formVal = from();
+        untracked(() => {
+            to.set(formVal);
+        });
+    });
+};
+const controlValueSignal = (control, options) => {
+    const vcsObs = options?.debounceTime
+        ? control.valueChanges.pipe(debounceTime(options?.debounceTime ?? 300))
+        : control.valueChanges;
+    const obs = options?.debounceFirst
+        ? merge(of(control.value), vcsObs)
+        : vcsObs.pipe(startWith(control.getRawValue()));
+    return toSignal(obs.pipe(distinctUntilChanged((a, b) => equal(a, b))), {
+        requireSync: true,
+    });
+};
+/**
+ * The first item in the pair is the previous value and the second item is the current value.
+ */
+const controlValueSignalWithPrevious = (control, options) => {
+    const obs = toObservable(controlValueSignal(control, options)).pipe(pairwise(), startWith([null, control.getRawValue()]));
+    return toSignal(obs, { requireSync: true });
+};
+/**
+ * @deprecated Use `controlValueSignal` instead with `debounceTime` set to `300` and `debounceFirst` set to `true`.
+ */
+const debouncedControlValueSignal = (control, options) => controlValueSignal(control, options ?? { debounceTime: 300, debounceFirst: true });
+const injectOrRunInContext = (fn, config) => {
+    if (config?.injector) {
+        return runInInjectionContext(config.injector, fn);
     }
-    _getInitialState() {
-        const data = {};
-        const pathParams = {};
-        const queryParams = {};
-        const title = null;
-        let fragment = null;
-        const currentQueryParams = window.location.search;
-        const currentFragment = window.location.hash;
-        if (currentQueryParams) {
-            const params = new URLSearchParams(currentQueryParams);
-            params.forEach((value, key) => {
-                queryParams[key] = value;
-            });
-        }
-        if (currentFragment) {
-            fragment = currentFragment.slice(1);
-        }
-        return {
-            data,
-            pathParams,
-            queryParams,
-            title,
-            fragment,
-        };
+    return fn();
+};
+const transformOrReturn = (src, config) => {
+    const transformer = config?.transform;
+    if (transformer) {
+        return computed(() => transformer(src()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RouterStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RouterStateService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RouterStateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+    return src;
+};
+/** Inject a signal containing the current route fragment (the part after the # inside the url if present) */
+const injectFragment = (config) => {
+    return injectOrRunInContext(() => {
+        const routerStateService = inject(RouterStateService);
+        const src = toSignal(routerStateService.fragment$, { initialValue: routerStateService.fragment });
+        return transformOrReturn(src, config);
+    }, config);
+};
+/** Inject all currently available query parameters as a signal */
+const injectQueryParams = (config) => {
+    return injectOrRunInContext(() => {
+        const routerStateService = inject(RouterStateService);
+        return toSignal(routerStateService.queryParams$, { initialValue: routerStateService.queryParams });
+    }, config);
+};
+/** Inject all currently available route data as a signal */
+const injectRouteData = (config) => {
+    return injectOrRunInContext(() => {
+        const routerStateService = inject(RouterStateService);
+        return toSignal(routerStateService.data$, { initialValue: routerStateService.data });
+    }, config);
+};
+/** Inject the current route title as a signal */
+const injectRouteTitle = (config) => {
+    return injectOrRunInContext(() => {
+        const routerStateService = inject(RouterStateService);
+        const src = toSignal(routerStateService.title$, { initialValue: routerStateService.title });
+        return transformOrReturn(src, config);
+    }, config);
+};
+/** Inject all currently available path parameters as a signal */
+const injectPathParams = (config) => {
+    return injectOrRunInContext(() => {
+        const routerStateService = inject(RouterStateService);
+        return toSignal(routerStateService.pathParams$, { initialValue: routerStateService.pathParams });
+    }, config);
+};
+/** Inject a specific query parameter as a signal */
+const injectQueryParam = (key, config) => {
+    const queryParams = injectQueryParams(config);
+    const src = computed(() => queryParams()[key] ?? null);
+    return transformOrReturn(src, config);
+};
+/** Inject a specific route data item as a signal */
+const injectRouteDataItem = (key, config) => {
+    const data = injectRouteData(config);
+    const src = computed(() => data()[key] ?? null);
+    return transformOrReturn(src, config);
+};
+/** Inject a specific path parameter as a signal */
+const injectPathParam = (key, config) => {
+    const pathParams = injectPathParams(config);
+    const src = computed(() => pathParams()[key] ?? null);
+    return transformOrReturn(src, config);
+};
 
-class ViewportService {
-    get isXs$() {
-        return this._isXs$.asObservable();
-    }
-    get isXs() {
-        return this._isXs$.value;
-    }
-    get isSm$() {
-        return this._isSm$.asObservable();
-    }
-    get isSm() {
-        return this._isSm$.value;
-    }
-    get isMd$() {
-        return this._isMd$.asObservable();
-    }
-    get isMd() {
-        return this._isMd$.value;
-    }
-    get isLg$() {
-        return this._isLg$.asObservable();
-    }
-    get isLg() {
-        return this._isLg$.value;
-    }
-    get isXl$() {
-        return this._isXl$.asObservable();
-    }
-    get isXl() {
-        return this._isXl$.value;
-    }
-    get is2Xl$() {
-        return this._is2Xl$.asObservable();
-    }
-    get is2Xl() {
-        return this._is2Xl$.value;
-    }
-    get viewportSize$() {
-        return this._viewportSize$.asObservable();
+const scrollBehaviorSupported = supportsScrollBehavior();
+let _uniqueIdCounter = 0;
+const BLOCK_CLASS = 'cdk-global-scrollblock';
+const OVERSCROLL_CLASS = 'et-global-no-overscroll';
+class SmartBlockScrollStrategy {
+    constructor(_viewportRuler, _routerState, document) {
+        this._viewportRuler = _viewportRuler;
+        this._routerState = _routerState;
+        this._id = _uniqueIdCounter++;
+        this._previousHTMLStyles = { top: '', left: '' };
+        this._previousScrollPosition = { top: 0, left: 0 };
+        this._isEnabled = false;
+        this._urlSubscription = null;
+        this._resizeSubscription = null;
+        this._didNavigate = false;
+        this._document = document;
     }
-    get viewportSize() {
-        return this._viewportSize$.value;
+    attach() {
+        // noop
     }
-    get scrollbarSize$() {
-        return this._scrollbarSize$.asObservable();
+    enable() {
+        if (this._canBeEnabled()) {
+            const root = this._document.documentElement;
+            root.classList.add(OVERSCROLL_CLASS);
+            this._resizeSubscription = createResizeObservable({ elements: root })
+                .pipe(startWith(null), tap(() => {
+                if (this._isEnabled || !elementCanScroll(root) || !this._canBeEnabled())
+                    return;
+                this._isEnabled = true;
+                this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
+                this._didNavigate = false;
+                this._previousHTMLStyles.left = root.style.left || '';
+                this._previousHTMLStyles.top = root.style.top || '';
+                root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
+                root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
+                root.classList.add(BLOCK_CLASS);
+                this._urlSubscription = this._routerState.route$
+                    .pipe(skip(1), take(1), tap(() => {
+                    this._didNavigate = true;
+                }))
+                    .subscribe();
+            }))
+                .subscribe();
+        }
     }
-    get scrollbarSize() {
-        return this._scrollbarSize$.value;
+    disable() {
+        this._urlSubscription?.unsubscribe();
+        this._resizeSubscription?.unsubscribe();
+        const html = this._document.documentElement;
+        if (this._canBeEnabled()) {
+            html.classList.remove(OVERSCROLL_CLASS);
+        }
+        if (this._isEnabled) {
+            const body = this._document.body;
+            const htmlStyle = html.style;
+            const bodyStyle = body.style;
+            const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
+            const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';
+            this._isEnabled = false;
+            htmlStyle.left = this._previousHTMLStyles.left;
+            htmlStyle.top = this._previousHTMLStyles.top;
+            html.classList.remove(BLOCK_CLASS);
+            if (scrollBehaviorSupported) {
+                htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
+            }
+            if (!this._didNavigate) {
+                window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
+            }
+            if (scrollBehaviorSupported) {
+                htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
+                bodyStyle.scrollBehavior = previousBodyScrollBehavior;
+            }
+        }
     }
-    get currentViewport() {
-        return this.getCurrentViewport([this.isXs, this.isSm, this.isMd, this.isLg, this.isXl, this.is2Xl]);
+    _canBeEnabled() {
+        const html = this._document.documentElement;
+        if (html.classList.contains(BLOCK_CLASS) || this._isEnabled) {
+            return false;
+        }
+        return true;
     }
+}
+
+const isPrimitiveArray = (value) => {
+    if (!Array.isArray(value))
+        return false;
+    const first = value[0];
+    const last = value[value.length - 1];
+    if (!first || !last)
+        return false;
+    return typeof first !== 'object' && typeof last !== 'object';
+};
+const isObjectArray = (value) => {
+    if (!Array.isArray(value))
+        return false;
+    const first = value[0];
+    const last = value[value.length - 1];
+    if (!first || !last)
+        return false;
+    return typeof first === 'object' && typeof last === 'object' && !Array.isArray(first) && !Array.isArray(last);
+};
+const isEmptyArray = (value) => {
+    return Array.isArray(value) && value.length === 0;
+};
+
+const provideViewportConfig = (viewportConfig) => {
+    return { provide: VIEWPORT_CONFIG, useValue: viewportConfig };
+};
+
+const ANIMATABLE_TOKEN = new InjectionToken('ANIMATABLE_DIRECTIVE_TOKEN');
+class AnimatableDirective {
     constructor() {
-        this._resizeObserverService = inject(ResizeObserverService);
-        this._viewportConfig = inject(VIEWPORT_CONFIG, { optional: true }) || DEFAULT_VIEWPORT_CONFIG;
-        this._breakpointObserver = inject(BreakpointObserver);
-        this._viewportMonitorStop$ = new Subject();
-        this._isViewportMonitorEnabled = false;
-        this._isXs$ = new BehaviorSubject(false);
-        this._isSm$ = new BehaviorSubject(false);
-        this._isMd$ = new BehaviorSubject(false);
-        this._isLg$ = new BehaviorSubject(false);
-        this._isXl$ = new BehaviorSubject(false);
-        this._is2Xl$ = new BehaviorSubject(false);
-        this._viewportSize$ = new BehaviorSubject(null);
-        this._scrollbarSize$ = new BehaviorSubject(null);
-        this.currentViewport$ = combineLatest([this.isXs$, this.isSm$, this.isMd$, this.isLg$, this.isXl$, this.is2Xl$]).pipe(map((val) => this.getCurrentViewport(val)), debounceTime(0), shareReplay({ bufferSize: 1, refCount: true }));
-        this._observeDefaultBreakpoints();
-    }
-    observe(options) {
-        const mediaQuery = this._buildMediaQuery(options);
-        return this._breakpointObserver.observe(mediaQuery).pipe(map((x) => x.matches), shareReplay({ bufferSize: 1, refCount: true }));
+        this._didEmitStart = false;
+        this._parent = inject(ANIMATABLE_TOKEN, { optional: true, skipSelf: true });
+        this._destroy$ = createDestroy();
+        this._elementRef = inject(ElementRef);
+        this._animationStart$ = new Subject();
+        this._animationEnd$ = new Subject();
+        this._animationCancelled$ = new Subject();
+        this._animatedElement$ = new BehaviorSubject(this._elementRef.nativeElement);
+        this.animationStart$ = this._animationStart$.asObservable().pipe(debounceTime(0));
+        this.animationEnd$ = this._animationEnd$.asObservable().pipe(debounceTime(0));
+        this.animationCancelled$ = this._animationCancelled$.asObservable().pipe(debounceTime(0));
+        this._hostActiveAnimationCount$ = new BehaviorSubject(0);
+        this._totalActiveAnimationCount$ = new BehaviorSubject(0);
+        this.isAnimating$ = this._totalActiveAnimationCount$.pipe(map((count) => count > 0), debounceTime(0));
     }
-    isMatched(options) {
-        const mediaQuery = this._buildMediaQuery(options);
-        return this._breakpointObserver.isMatched(mediaQuery);
+    set animatedElement(value) {
+        let newElement = null;
+        if (value === null || value === undefined || value === '') {
+            newElement = this._elementRef.nativeElement;
+        }
+        else if (typeof value === 'string') {
+            const el = document.querySelector(value);
+            if (el) {
+                newElement = el;
+            }
+            else {
+                if (isDevMode()) {
+                    console.warn(`Element with selector ${value} not found. Animatable directive will use host element.`);
+                }
+                newElement = this._elementRef.nativeElement;
+            }
+        }
+        else {
+            newElement = value;
+        }
+        if (this._animatedElement$.value !== newElement) {
+            this._animatedElement$.next(newElement);
+        }
     }
-    /**
-     * Applies size CSS variables to the documentElement in pixels.
-     * - `--et-vw`: viewport width excluding scrollbar width
-     * - `--et-vh`: viewport height excluding scrollbar height
-     * - `--et-sw`: scrollbar width
-     * - `--et-sh`: scrollbar height
-     */
-    monitorViewport() {
-        if (this._isViewportMonitorEnabled)
-            return;
-        this._isViewportMonitorEnabled = true;
-        this._resizeObserverService
-            .observe(document.documentElement)
-            .pipe(tap((e) => {
-            const entry = e[0];
-            if (!entry)
-                return;
-            const width = entry.contentRect.width;
-            const height = entry.contentRect.height;
-            const obj = { width, height };
-            if (equal(obj, this._viewportSize$.value))
-                return;
-            document.documentElement.style.setProperty('--et-vw', `${obj.width}px`);
-            document.documentElement.style.setProperty('--et-vh', `${obj.height}px`);
-            this._viewportSize$.next(obj);
-        }), finalize(() => {
-            document.documentElement.style.removeProperty('--et-vw');
-            document.documentElement.style.removeProperty('--et-vh');
-            this._viewportSize$.next(null);
-        }), takeUntil(this._viewportMonitorStop$))
+    ngOnInit() {
+        this._animatedElement$
+            .pipe(tap((el) => {
+            this._totalActiveAnimationCount$.next(this._totalActiveAnimationCount$.value - this._hostActiveAnimationCount$.value);
+            this._hostActiveAnimationCount$.next(0);
+            merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart'))
+                .pipe(filter((e) => e.target === el), // skip events from children
+            tap(() => {
+                const count = this._hostActiveAnimationCount$.value + 1;
+                this._hostActiveAnimationCount$.next(count);
+                this._totalActiveAnimationCount$.next(count);
+            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
+                .subscribe();
+            merge(fromEvent(el, 'animationend'), fromEvent(el, 'animationcancel'), fromEvent(el, 'transitionend'), fromEvent(el, 'transitioncancel'))
+                .pipe(filter((e) => e.target === el), // skip events from children
+            tap(() => {
+                const count = this._hostActiveAnimationCount$.value - 1;
+                this._hostActiveAnimationCount$.next(count);
+                this._totalActiveAnimationCount$.next(count);
+            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
+                .subscribe();
+            merge(fromEvent(el, 'animationcancel'), fromEvent(el, 'transitioncancel'))
+                .pipe(filter((e) => e.target === el), // skip events from children
+            tap(() => {
+                this._animationCancelled$.next();
+            }), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
+                .subscribe();
+        }), takeUntil(this._destroy$))
             .subscribe();
-        const scrollbarRuler = document.createElement('div');
-        scrollbarRuler.style.width = '100px';
-        scrollbarRuler.style.height = '100px';
-        scrollbarRuler.style.overflow = 'scroll';
-        scrollbarRuler.style.position = 'absolute';
-        scrollbarRuler.style.top = '-9999px';
-        document.body.appendChild(scrollbarRuler);
-        this._resizeObserverService
-            .observe(scrollbarRuler)
-            .pipe(tap((e) => {
-            const entry = e[0];
-            if (!entry)
-                return;
-            const size = entry.contentRect.width;
-            const obj = { width: 100 - size, height: 100 - size };
-            if (equal(obj, this._scrollbarSize$.value))
-                return;
-            document.documentElement.style.setProperty('--et-sw', `${obj.width}px`);
-            document.documentElement.style.setProperty('--et-sh', `${obj.height}px`);
-            this._scrollbarSize$.next(obj);
-        }), finalize(() => {
-            document.body.removeChild(scrollbarRuler);
-            document.documentElement.style.removeProperty('--et-vw');
-            document.documentElement.style.removeProperty('--et-vh');
-            this._scrollbarSize$.next(null);
-        }), takeUntil(this._viewportMonitorStop$))
+        this._totalActiveAnimationCount$
+            .pipe(tap((count) => {
+            if (count > 0 && !this._didEmitStart) {
+                this._animationStart$.next();
+                this._didEmitStart = true;
+            }
+            else if (count === 0) {
+                this._animationEnd$.next();
+                this._didEmitStart = false;
+            }
+        }), takeUntil(this._destroy$))
             .subscribe();
+        if (this._parent) {
+            this._parent._hostActiveAnimationCount$
+                .pipe(takeUntil(this._destroy$), tap((count) => {
+                this._totalActiveAnimationCount$.next(count + this._hostActiveAnimationCount$.value);
+            }))
+                .subscribe();
+        }
     }
-    unmonitorViewport() {
-        this._viewportMonitorStop$.next();
-        this._isViewportMonitorEnabled = false;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", inputs: { animatedElement: ["etAnimatable", "animatedElement"] }, providers: [
+            {
+                provide: ANIMATABLE_TOKEN,
+                useExisting: AnimatableDirective,
+            },
+        ], exportAs: ["etAnimatable"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etAnimatable]',
+                    exportAs: 'etAnimatable',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: ANIMATABLE_TOKEN,
+                            useExisting: AnimatableDirective,
+                        },
+                    ],
+                }]
+        }], propDecorators: { animatedElement: [{
+                type: Input,
+                args: ['etAnimatable']
+            }] } });
+
+const ANIMATED_LIFECYCLE_TOKEN = new InjectionToken('ANIMATED_LIFECYCLE_DIRECTIVE_TOKEN');
+const ANIMATION_CLASSES = {
+    enterFrom: 'et-animation-enter-from',
+    enterActive: 'et-animation-enter-active',
+    enterTo: 'et-animation-enter-to',
+    leaveFrom: 'et-animation-leave-from',
+    leaveActive: 'et-animation-leave-active',
+    leaveTo: 'et-animation-leave-to',
+};
+class AnimatedLifecycleDirective {
+    constructor() {
+        this._destroy$ = createDestroy();
+        this._elementRef = inject(ElementRef);
+        this._animatable = inject(ANIMATABLE_TOKEN);
+        this._classList = this._elementRef.nativeElement.classList;
+        this._isConstructed = false;
+        this._state$ = new BehaviorSubject('init');
+        this.state$ = this._state$.asObservable();
+        this.hostClassBindings = signalHostClasses({
+            'et-force-invisible': toSignal(this._state$.pipe(map((state) => state === 'init'))),
+        });
+        this.stateChange = outputFromObservable(this._state$);
+        this.skipNextEnter = model(false);
     }
-    getBreakpointSize(type, option) {
-        const index = option === 'min' ? 0 : 1;
-        const size = this._viewportConfig.breakpoints[type][index];
-        if (size === Infinity || size === 0) {
-            return size;
-        }
-        if (option === 'min') {
-            return size;
-        }
-        // Due to scaling, the actual size of the viewport may be a decimal number.
-        // Eg. on Windows 11 with 150% scaling, the viewport size may be 1535.33px
-        // and thus not matching any of the default breakpoints.
-        return size + 0.9;
+    get state() {
+        return this._state$.value;
     }
-    _observeDefaultBreakpoints() {
-        this.observe({ max: 'xs' }).subscribe(this._isXs$);
-        this.observe({ min: 'sm', max: 'sm' }).subscribe(this._isSm$);
-        this.observe({ min: 'md', max: 'md' }).subscribe(this._isMd$);
-        this.observe({ min: 'lg', max: 'lg' }).subscribe(this._isLg$);
-        this.observe({ min: 'xl', max: 'xl' }).subscribe(this._isXl$);
-        this.observe({ min: '2xl' }).subscribe(this._is2Xl$);
+    ngAfterViewInit() {
+        this._isConstructed = true;
     }
-    _buildMediaQuery(options) {
-        if (!options.min && !options.max) {
-            throw new Error('At least one of min or max must be defined');
+    enter(config) {
+        if (this.state === 'entering')
+            return;
+        if ((this.state === 'init' && !this._isConstructed) || this.skipNextEnter()) {
+            // Force the state to entered so that the element is not animated when it is first rendered.
+            this._forceState('entered');
+            this.skipNextEnter.set(false);
+            return;
         }
-        const mediaQueryParts = [];
-        if (options.min) {
-            if (typeof options.min === 'number') {
-                mediaQueryParts.push(`(min-width: ${options.min}px)`);
-            }
-            else {
-                mediaQueryParts.push(`(min-width: ${this.getBreakpointSize(options.min, 'min')}px)`);
-            }
+        if (this.state === 'leaving') {
+            this._classList.remove(ANIMATION_CLASSES.leaveFrom);
+            this._classList.remove(ANIMATION_CLASSES.leaveActive);
+            this._classList.remove(ANIMATION_CLASSES.leaveTo);
         }
-        if (options.min && options.max) {
-            mediaQueryParts.push('and');
+        this._state$.next('entering');
+        if (!config?.onlyTransition) {
+            this._classList.add(ANIMATION_CLASSES.enterFrom);
         }
-        if (options.max) {
-            if (typeof options.max === 'number') {
-                mediaQueryParts.push(`(max-width: ${options.max}px)`);
+        forceReflow();
+        this._classList.add(ANIMATION_CLASSES.enterActive);
+        fromNextFrame()
+            .pipe(tap(() => {
+            if (!config?.onlyTransition && this.state === 'entering') {
+                this._classList.remove(ANIMATION_CLASSES.enterFrom);
+                this._classList.add(ANIMATION_CLASSES.enterTo);
             }
-            else {
-                mediaQueryParts.push(`(max-width: ${this.getBreakpointSize(options.max, 'max')}px)`);
+        }), switchMap(() => this._animatable.animationEnd$), tap(() => {
+            if (this.state !== 'entering')
+                return;
+            this._state$.next('entered');
+            this._classList.remove(ANIMATION_CLASSES.enterActive);
+            if (!config?.onlyTransition) {
+                this._classList.remove(ANIMATION_CLASSES.enterTo);
             }
-        }
-        return mediaQueryParts.join(' ');
+        }), takeUntil(this._destroy$), take(1))
+            .subscribe();
     }
-    getCurrentViewport([isXs, isSm, isMd, isLg, isXl, is2Xl]) {
-        if (isXs) {
-            return 'xs';
-        }
-        else if (isSm) {
-            return 'sm';
+    leave(config) {
+        if (this.state === 'leaving')
+            return;
+        if (this.state === 'init') {
+            this._state$.next('left');
+            return;
         }
-        else if (isMd) {
-            return 'md';
+        if (this.state === 'entering') {
+            this._classList.remove(ANIMATION_CLASSES.enterFrom);
+            this._classList.remove(ANIMATION_CLASSES.enterActive);
+            this._classList.remove(ANIMATION_CLASSES.enterTo);
         }
-        else if (isLg) {
-            return 'lg';
+        this._state$.next('leaving');
+        if (!config?.onlyTransition) {
+            this._classList.add(ANIMATION_CLASSES.leaveFrom);
         }
-        else if (isXl) {
-            return 'xl';
+        forceReflow();
+        this._classList.add(ANIMATION_CLASSES.leaveActive);
+        fromNextFrame()
+            .pipe(tap(() => {
+            if (!config?.onlyTransition && this.state === 'leaving') {
+                this._classList.remove(ANIMATION_CLASSES.leaveFrom);
+                this._classList.add(ANIMATION_CLASSES.leaveTo);
+            }
+        }), switchMap(() => this._animatable.animationEnd$), tap(() => {
+            if (this.state !== 'leaving')
+                return;
+            this._state$.next('left');
+            this._classList.remove(ANIMATION_CLASSES.leaveActive);
+            if (!config?.onlyTransition) {
+                this._classList.remove(ANIMATION_CLASSES.leaveTo);
+            }
+        }), takeUntil(this._destroy$), take(1))
+            .subscribe();
+    }
+    _forceState(state) {
+        this._state$.next(state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.6", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", inputs: { skipNextEnter: { classPropertyName: "skipNextEnter", publicName: "skipNextEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stateChange: "stateChange", skipNextEnter: "skipNextEnterChange" }, providers: [
+            {
+                provide: ANIMATED_LIFECYCLE_TOKEN,
+                useExisting: AnimatedLifecycleDirective,
+            },
+        ], exportAs: ["etAnimatedLifecycle"], hostDirectives: [{ directive: AnimatableDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etAnimatedLifecycle]',
+                    exportAs: 'etAnimatedLifecycle',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: ANIMATED_LIFECYCLE_TOKEN,
+                            useExisting: AnimatedLifecycleDirective,
+                        },
+                    ],
+                    hostDirectives: [AnimatableDirective],
+                }]
+        }] });
+
+const ANIMATED_IF_TOKEN = new InjectionToken('ANIMATED_IF_TOKEN');
+class AnimatedIfDirective {
+    constructor() {
+        this._destroy$ = createDestroy();
+        this._ngIf = inject(NgIf);
+        this._animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
+    }
+    set shouldRender(value) {
+        if (value) {
+            this._ngIf.ngIf = value;
+            this._animatedLifecycle.enter();
         }
-        else if (is2Xl) {
-            return '2xl';
+        else {
+            this._animatedLifecycle.leave();
+            this._animatedLifecycle.state$
+                .pipe(takeUntil(this._destroy$), takeWhile((state) => state !== 'left', true), filter((state) => state === 'left'), tap(() => {
+                this._ngIf.ngIf = value;
+            }))
+                .subscribe();
         }
-        return 'xs';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ViewportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ViewportService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatedIfDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: AnimatedIfDirective, isStandalone: true, selector: "[etAnimatedIf]", inputs: { shouldRender: ["etAnimatedIf", "shouldRender"] }, providers: [
+            {
+                provide: ANIMATED_IF_TOKEN,
+                useExisting: AnimatedIfDirective,
+            },
+        ], hostDirectives: [{ directive: i1.NgIf }], ngImport: i0 }); }
 }
-__decorate([
-    Memo(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [String, String]),
-    __metadata("design:returntype", void 0)
-], ViewportService.prototype, "getBreakpointSize", null);
-__decorate([
-    Memo({
-        resolver: (v) => {
-            return `${v.min ?? ''}-${v.max ?? ''}`;
-        },
-    }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], ViewportService.prototype, "_buildMediaQuery", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ViewportService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatedIfDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root',
+                    selector: '[etAnimatedIf]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: ANIMATED_IF_TOKEN,
+                            useExisting: AnimatedIfDirective,
+                        },
+                    ],
+                    hostDirectives: [NgIf],
                 }]
-        }], ctorParameters: () => [], propDecorators: { getBreakpointSize: [], _buildMediaQuery: [] } });
+        }], propDecorators: { shouldRender: [{
+                type: Input,
+                args: ['etAnimatedIf']
+            }] } });
 
 class ObserveResizeDirective {
     constructor() {
@@ -3038,10 +3144,10 @@ class ObserveResizeDirective {
     _unsubscribe() {
         this._currentSubscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ObserveResizeDirective, isStandalone: true, selector: "[etObserveResize]", inputs: { disabled: ["etObserveResizeDisabled", "disabled"], debounce: ["etObserveResizeDebounce", "debounce"] }, outputs: { valueChange: "etObserveResize" }, exportAs: ["etObserveResize"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: ObserveResizeDirective, isStandalone: true, selector: "[etObserveResize]", inputs: { disabled: ["etObserveResizeDisabled", "disabled"], debounce: ["etObserveResizeDebounce", "debounce"] }, outputs: { valueChange: "etObserveResize" }, exportAs: ["etObserveResize"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etObserveResize]',
@@ -3071,15 +3177,15 @@ class RootBoundaryDirective {
     set boundaryElement(v) {
         this._boundaryElement = v;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RootBoundaryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: RootBoundaryDirective, isStandalone: true, selector: "[etRootBoundary]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RootBoundaryDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: RootBoundaryDirective, isStandalone: true, selector: "[etRootBoundary]", providers: [
             {
                 provide: ROOT_BOUNDARY_TOKEN,
                 useExisting: RootBoundaryDirective,
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RootBoundaryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RootBoundaryDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etRootBoundary]',
@@ -3385,10 +3491,10 @@ class AnimatedOverlayDirective {
         this._isUnmounting$.next(false);
         this._afterClosed?.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: AnimatedOverlayDirective, isStandalone: true, inputs: { placement: "placement", fallbackPlacements: "fallbackPlacements", offset: "offset", arrowPadding: "arrowPadding", viewportPadding: "viewportPadding", autoResize: "autoResize", shift: "shift", autoHide: "autoHide", autoCloseIfReferenceHidden: "autoCloseIfReferenceHidden" }, host: { classAttribute: "et-animated-overlay" }, hostDirectives: [{ directive: ObserveResizeDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: AnimatedOverlayDirective, isStandalone: true, inputs: { placement: "placement", fallbackPlacements: "fallbackPlacements", offset: "offset", arrowPadding: "arrowPadding", viewportPadding: "viewportPadding", autoResize: "autoResize", shift: "shift", autoHide: "autoHide", autoCloseIfReferenceHidden: "autoCloseIfReferenceHidden" }, host: { classAttribute: "et-animated-overlay" }, hostDirectives: [{ directive: ObserveResizeDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: AnimatedOverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: AnimatedOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3438,10 +3544,10 @@ class ClickOutsideDirective {
     ngOnDestroy() {
         this._subscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ClickOutsideDirective, isStandalone: true, selector: "[etClickOutside]", outputs: { etClickOutside: "etClickOutside" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: ClickOutsideDirective, isStandalone: true, selector: "[etClickOutside]", outputs: { etClickOutside: "etClickOutside" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etClickOutside]',
@@ -3595,10 +3701,10 @@ class CursorDragScrollDirective {
             this._elementRef.nativeElement.style.cursor = 'default';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CursorDragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: CursorDragScrollDirective, isStandalone: true, selector: "[etCursorDragScroll]", inputs: { enabled: ["etCursorDragScroll", "enabled"], allowedDirection: "allowedDirection" }, outputs: { cursorDragStart: "cursorDragStart", cursorDragMove: "cursorDragMove", cursorDragEnd: "cursorDragEnd" }, exportAs: ["etCursorDragScroll"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CursorDragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: CursorDragScrollDirective, isStandalone: true, selector: "[etCursorDragScroll]", inputs: { enabled: ["etCursorDragScroll", "enabled"], allowedDirection: "allowedDirection" }, outputs: { cursorDragStart: "cursorDragStart", cursorDragMove: "cursorDragMove", cursorDragEnd: "cursorDragEnd" }, exportAs: ["etCursorDragScroll"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CursorDragScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: CursorDragScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etCursorDragScroll]',
@@ -3631,15 +3737,15 @@ class DebugDirective {
     set sDebug(value) {
         this._debug.set(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DebugDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.4", type: DebugDirective, isStandalone: true, selector: "[etDebug]", inputs: { sDebug: ["etDebug", "sDebug", booleanAttribute] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DebugDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.6", type: DebugDirective, isStandalone: true, selector: "[etDebug]", inputs: { sDebug: ["etDebug", "sDebug", booleanAttribute] }, providers: [
             {
                 provide: DEBUG_TOKEN,
                 useExisting: DebugDirective,
             },
         ], exportAs: ["etDebug"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DebugDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DebugDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etDebug]',
@@ -3686,15 +3792,15 @@ class DelayableDirective {
         }
         this._isDelayed$.next(val);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DelayableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: DelayableDirective, isStandalone: true, selector: "[etDelayable]", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DelayableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: DelayableDirective, isStandalone: true, selector: "[etDelayable]", providers: [
             {
                 provide: DELAYABLE_TOKEN,
                 useExisting: DelayableDirective,
             },
         ], exportAs: ["etDelayable"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DelayableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: DelayableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etDelayable]',
@@ -3715,15 +3821,15 @@ class IsActiveElementDirective {
         this.elementRef = inject(ElementRef);
         this.isActiveElement = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IsActiveElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.4", type: IsActiveElementDirective, isStandalone: true, selector: "[etIsActiveElement]", inputs: { isActiveElement: ["etIsActiveElement", "isActiveElement", booleanAttribute] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IsActiveElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.6", type: IsActiveElementDirective, isStandalone: true, selector: "[etIsActiveElement]", inputs: { isActiveElement: ["etIsActiveElement", "isActiveElement", booleanAttribute] }, providers: [
             {
                 provide: IS_ACTIVE_ELEMENT,
                 useExisting: IsActiveElementDirective,
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IsActiveElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IsActiveElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etIsActiveElement]',
@@ -3746,15 +3852,15 @@ class IsElementDirective {
         this.elementRef = inject(ElementRef);
         this.isElement = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IsElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.4", type: IsElementDirective, isStandalone: true, selector: "[etIsElement]", inputs: { isElement: ["etIsElement", "isElement", booleanAttribute] }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IsElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.6", type: IsElementDirective, isStandalone: true, selector: "[etIsElement]", inputs: { isElement: ["etIsElement", "isElement", booleanAttribute] }, providers: [
             {
                 provide: IS_ELEMENT,
                 useExisting: IsElementDirective,
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: IsElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: IsElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etIsElement]',
@@ -3803,10 +3909,10 @@ class LetDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: LetDirective, isStandalone: true, selector: "[etLet]", inputs: { etLet: "etLet" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: LetDirective, isStandalone: true, selector: "[etLet]", inputs: { etLet: "etLet" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: LetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etLet]',
@@ -3858,10 +3964,10 @@ class ObserveContentDirective {
     _unsubscribe() {
         this._currentSubscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ObserveContentDirective, isStandalone: true, selector: "[etObserveContent]", inputs: { disabled: ["etObserveContentDisabled", "disabled"], debounce: ["etObserveContentDebounce", "debounce"] }, outputs: { valueChange: "etObserveContent" }, exportAs: ["etObserveContent"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: ObserveContentDirective, isStandalone: true, selector: "[etObserveContent]", inputs: { disabled: ["etObserveContentDisabled", "disabled"], debounce: ["etObserveContentDebounce", "debounce"] }, outputs: { valueChange: "etObserveContent" }, exportAs: ["etObserveContent"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etObserveContent]',
@@ -3886,10 +3992,10 @@ class ScrollObserverFirstElementDirective {
     constructor() {
         this.isFirstElement = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScrollObserverFirstElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.4", type: ScrollObserverFirstElementDirective, isStandalone: true, selector: "[etScrollObserverFirstElement]", inputs: { isFirstElement: ["etScrollObserverFirstElement", "isFirstElement", booleanAttribute] }, host: { properties: { "class.et-scroll-observer-first-element": "this.isFirstElement" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ScrollObserverFirstElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.6", type: ScrollObserverFirstElementDirective, isStandalone: true, selector: "[etScrollObserverFirstElement]", inputs: { isFirstElement: ["etScrollObserverFirstElement", "isFirstElement", booleanAttribute] }, host: { properties: { "class.et-scroll-observer-first-element": "this.isFirstElement" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScrollObserverFirstElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ScrollObserverFirstElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etScrollObserverFirstElement]',
@@ -3905,10 +4011,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
 
 const SCROLL_OBSERVER_IGNORE_TARGET_CLASS = 'et-scroll-observer-ignore-target';
 class ScrollObserverIgnoreTargetDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScrollObserverIgnoreTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ScrollObserverIgnoreTargetDirective, isStandalone: true, selector: "[etScrollObserverIgnoreTarget]", host: { classAttribute: "et-scroll-observer-ignore-target" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ScrollObserverIgnoreTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: ScrollObserverIgnoreTargetDirective, isStandalone: true, selector: "[etScrollObserverIgnoreTarget]", host: { classAttribute: "et-scroll-observer-ignore-target" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScrollObserverIgnoreTargetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ScrollObserverIgnoreTargetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etScrollObserverIgnoreTarget]',
@@ -3924,10 +4030,10 @@ class ScrollObserverLastElementDirective {
     constructor() {
         this.isLastElement = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScrollObserverLastElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.4", type: ScrollObserverLastElementDirective, isStandalone: true, selector: "[etScrollObserverLastElement]", inputs: { isLastElement: ["etScrollObserverLastElement", "isLastElement", booleanAttribute] }, host: { properties: { "class.et-scroll-observer-last-element": "this.isLastElement" }, classAttribute: "et-scroll-observer-last-element" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ScrollObserverLastElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.6", type: ScrollObserverLastElementDirective, isStandalone: true, selector: "[etScrollObserverLastElement]", inputs: { isLastElement: ["etScrollObserverLastElement", "isLastElement", booleanAttribute] }, host: { properties: { "class.et-scroll-observer-last-element": "this.isLastElement" }, classAttribute: "et-scroll-observer-last-element" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ScrollObserverLastElementDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ScrollObserverLastElementDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etScrollObserverLastElement]',
@@ -4084,15 +4190,15 @@ class ObserveScrollStateDirective {
         }
         return element;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveScrollStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.4", type: ObserveScrollStateDirective, isStandalone: true, selector: "[etObserveScrollState]", inputs: { rootMargin: ["rootMargin", "rootMargin", numberAttribute], observerThreshold: "observerThreshold" }, outputs: { valueChange: "etObserveScrollState" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveScrollStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.6", type: ObserveScrollStateDirective, isStandalone: true, selector: "[etObserveScrollState]", inputs: { rootMargin: ["rootMargin", "rootMargin", numberAttribute], observerThreshold: "observerThreshold" }, outputs: { valueChange: "etObserveScrollState" }, providers: [
             {
                 provide: OBSERVE_SCROLL_STATE,
                 useExisting: ObserveScrollStateDirective,
             },
         ], exportAs: ["etObserveScrollState"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveScrollStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveScrollStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etObserveScrollState]',
@@ -4162,15 +4268,15 @@ class ObserveVisibilityDirective {
         }))
             .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveVisibilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ObserveVisibilityDirective, isStandalone: true, selector: "[etObserveVisibility]", outputs: { etObserveVisibility: "etObserveVisibility" }, host: { classAttribute: "et-observe-visibility" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveVisibilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: ObserveVisibilityDirective, isStandalone: true, selector: "[etObserveVisibility]", outputs: { etObserveVisibility: "etObserveVisibility" }, host: { classAttribute: "et-observe-visibility" }, providers: [
             {
                 provide: OBSERVE_VISIBILITY_TOKEN,
                 useExisting: ObserveVisibilityDirective,
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ObserveVisibilityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ObserveVisibilityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etObserveVisibility]',
@@ -4208,10 +4314,10 @@ class RepeatDirective {
             this._viewContainerRef.createEmbeddedView(this._mainTemplateRef);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RepeatDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: RepeatDirective, isStandalone: true, selector: "[etRepeat]", inputs: { repeatCount: ["etRepeat", "repeatCount"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RepeatDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: RepeatDirective, isStandalone: true, selector: "[etRepeat]", inputs: { repeatCount: ["etRepeat", "repeatCount"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: RepeatDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: RepeatDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etRepeat]',
@@ -4380,10 +4486,10 @@ class SeoDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SeoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: SeoDirective, isStandalone: true, providers: [{ provide: SEO_DIRECTIVE_TOKEN, useExisting: SeoDirective }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SeoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.6", type: SeoDirective, isStandalone: true, providers: [{ provide: SEO_DIRECTIVE_TOKEN, useExisting: SeoDirective }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SeoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: SeoDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -4559,10 +4665,10 @@ class InferMimeTypePipe {
     constructor() {
         this.transform = inferMimeType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: InferMimeTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: InferMimeTypePipe, isStandalone: true, name: "inferMimeType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: InferMimeTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: InferMimeTypePipe, isStandalone: true, name: "inferMimeType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: InferMimeTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: InferMimeTypePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'inferMimeType',
@@ -4608,10 +4714,10 @@ class NormalizeGameResultTypePipe {
     constructor() {
         this.transform = normalizeGameResultType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeGameResultTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: NormalizeGameResultTypePipe, isStandalone: true, name: "etNormalizeGameResultType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeGameResultTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: NormalizeGameResultTypePipe, isStandalone: true, name: "etNormalizeGameResultType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeGameResultTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeGameResultTypePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeGameResultType', standalone: true }]
         }] });
@@ -4639,10 +4745,10 @@ class NormalizeMatchStatePipe {
     constructor() {
         this.transform = normalizeMatchState;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchStatePipe, isStandalone: true, name: "etNormalizeMatchState" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchStatePipe, isStandalone: true, name: "etNormalizeMatchState" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchStatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchStatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchState', standalone: true }]
         }] });
@@ -4697,10 +4803,10 @@ class NormalizeMatchParticipantsPipe {
     constructor() {
         this.transform = normalizeMatchParticipants;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchParticipantsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchParticipantsPipe, isStandalone: true, name: "etNormalizeMatchParticipants" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchParticipantsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchParticipantsPipe, isStandalone: true, name: "etNormalizeMatchParticipants" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchParticipantsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchParticipantsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchParticipants', standalone: true }]
         }] });
@@ -4834,10 +4940,10 @@ class NormalizeMatchScorePipe {
     constructor() {
         this.transform = normalizeMatchScore;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchScorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchScorePipe, isStandalone: true, name: "etNormalizeMatchScore" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchScorePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchScorePipe, isStandalone: true, name: "etNormalizeMatchScore" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchScorePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchScorePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchScore', standalone: true }]
         }] });
@@ -4884,10 +4990,10 @@ class NormalizeMatchTypePipe {
     constructor() {
         this.transform = normalizeMatchType;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchTypePipe, isStandalone: true, name: "etNormalizeMatchType" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchTypePipe, isStandalone: true, name: "etNormalizeMatchType" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NormalizeMatchTypePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: NormalizeMatchTypePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'etNormalizeMatchType', standalone: true }]
         }] });
@@ -4901,10 +5007,10 @@ class ToArrayPipe {
     constructor() {
         this.transform = toArray;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ToArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: ToArrayPipe, isStandalone: true, name: "toArray" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.6", ngImport: i0, type: ToArrayPipe, isStandalone: true, name: "toArray" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ToArrayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToArrayPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'toArray', standalone: true }]
         }] });
@@ -5122,10 +5228,10 @@ class PropsDirective {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.4", type: PropsDirective, isStandalone: true, selector: "[etProps]", inputs: { props: { classPropertyName: "props", publicName: "etProps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.6", type: PropsDirective, isStandalone: true, selector: "[etProps]", inputs: { props: { classPropertyName: "props", publicName: "etProps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PropsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: PropsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etProps]',
@@ -5258,5 +5364,5 @@ const Validators = {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, ActiveSelectionModel, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, CURSOR_DRAG_SCROLLING_CLASS, CURSOR_DRAG_SCROLLING_PREPARED_CLASS, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEBUG_TOKEN, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DebugDirective, DelayableDirective, ET_PROPERTY_REMOVED, FocusVisibleService, IS_ACTIVE_ELEMENT, IS_ARRAY_NOT_EMPTY, IS_ELEMENT, IS_EMAIL, InferMimeTypePipe, IntersectionObserverFactory, IntersectionObserverService, IsActiveElementDirective, IsArrayNotEmpty, IsElementDirective, IsEmail, KeyPressManager, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, OBSERVE_VISIBILITY_TOKEN, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, ObserveVisibilityDirective, PropsDirective, ROOT_BOUNDARY_TOKEN, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RootBoundaryDirective, RouterStateService, RuntimeError, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SelectionModel, SeoDirective, SmartBlockScrollStrategy, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, ValidateAtLeastOneRequired, Validators, ViewportService, bindProps, buildSignalEffects, clamp, clone, cloneFormGroup, controlValueSignal, controlValueSignalWithPrevious, createComponentId, createDependencyStash, createDestroy, createElementDictionary, createFlipAnimation, createFlipAnimationGroup, createHostProps, createMediaQueryObservable, createMutationObservable, createPropHandlers, createProps, createReactiveBindings, createResizeObservable, createSetup, debouncedControlValueSignal, deleteCookie, elementCanScroll, equal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementVisibleStates, getFirstAndLastPartialIntersection, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, hasCookie, inferMimeType, injectHostElement, injectTemplateRef, isArray, isElementVisible, isEmptyArray, isGroupMatch, isKnockoutMatch, isObject, isObjectArray, isPrimitiveArray, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, previousSignalValue, provideViewportConfig, round, routerDisableScrollTop, scrollToElement, setCookie, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, signalVisibilityChangeClasses, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, unbindProps };
+export { ANIMATABLE_TOKEN, ANIMATED_IF_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AT_LEAST_ONE_REQUIRED, ActiveSelectionModel, AnimatableDirective, AnimatedIfDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, CURSOR_DRAG_SCROLLING_CLASS, CURSOR_DRAG_SCROLLING_PREPARED_CLASS, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEBUG_TOKEN, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DebugDirective, DelayableDirective, ET_PROPERTY_REMOVED, FocusVisibleService, IS_ACTIVE_ELEMENT, IS_ARRAY_NOT_EMPTY, IS_ELEMENT, IS_EMAIL, InferMimeTypePipe, IntersectionObserverFactory, IntersectionObserverService, IsActiveElementDirective, IsArrayNotEmpty, IsElementDirective, IsEmail, KeyPressManager, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, OBSERVE_VISIBILITY_TOKEN, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, ObserveVisibilityDirective, PropsDirective, ROOT_BOUNDARY_TOKEN, RUNTIME_ERROR_NO_DATA, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RootBoundaryDirective, RouterStateService, RuntimeError, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_OBSERVING_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SelectionModel, SeoDirective, SmartBlockScrollStrategy, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, ValidateAtLeastOneRequired, Validators, ViewportService, bindProps, buildSignalEffects, clamp, clone, cloneFormGroup, controlValueSignal, controlValueSignalWithPrevious, createComponentId, createDependencyStash, createDestroy, createElementDictionary, createFlipAnimation, createFlipAnimationGroup, createHostProps, createMediaQueryObservable, createMutationObservable, createPropHandlers, createProps, createReactiveBindings, createResizeObservable, createSetup, debouncedControlValueSignal, deleteCookie, elementCanScroll, equal, forceReflow, formatRuntimeError, fromNextFrame, getCookie, getDomain, getElementVisibleStates, getFormGroupValue, getGroupMatchPoints, getGroupMatchScore, getIntersectionInfo, getKnockoutMatchScore, getMatchScoreSubLine, getObjectProperty, hasCookie, inferMimeType, injectFragment, injectHostElement, injectOrRunInContext, injectPathParam, injectPathParams, injectQueryParam, injectQueryParams, injectRouteData, injectRouteDataItem, injectRouteTitle, injectTemplateRef, isArray, isElementVisible, isEmptyArray, isGroupMatch, isKnockoutMatch, isObject, isObjectArray, isPrimitiveArray, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, previousSignalValue, provideViewportConfig, round, routerDisableScrollTop, scrollToElement, setCookie, signalAttributes, signalClasses, signalElementChildren, signalElementDimensions, signalElementIntersection, signalElementMutations, signalElementScrollState, signalHostAttributes, signalHostClasses, signalHostElementDimensions, signalHostElementIntersection, signalHostElementMutations, signalHostElementScrollState, signalHostStyles, signalIsRendered, signalStyles, signalVisibilityChangeClasses, switchQueryListChanges, syncSignal, templateComputed, toArray, toArrayTrackByFn, transformOrReturn, unbindProps };
 //# sourceMappingURL=ethlete-core.mjs.map