@ethlete/components 1.0.0-next.28 → 1.0.0-next.30

package/fesm2022/ethlete-components.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
 import { ViewEncapsulation, Component, Directive, input, booleanAttribute, signal, effect, numberAttribute, computed, inject, ElementRef, afterNextRender, DestroyRef, InjectionToken, model, linkedSignal, output, Injector, runInInjectionContext, untracked, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, createComponent, TemplateRef, afterRenderEffect, contentChild, viewChildren, outputBinding, afterEveryRender, isSignal, assertInInjectionContext, isDevMode, provideEnvironmentInitializer, PLATFORM_ID, contentChildren } from '@angular/core';
 import * as i1 from '@ethlete/core';
-import { injectStyleManager, SurfaceInteractiveDirective, RuntimeError, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, injectErrorTheme, signalElementDimensions, createProvider, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceContextTracker, injectRenderer, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, createRootProvider, injectOverlayRuntime, injectAnimatedBlockSize, randomId, createStaticRootProvider, forceReflow, nextFrame, elementCanScroll, createSwipeTracker, createComponentId, injectObserveBreakpoint, AutoSurfaceDirective, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, injectPrefersReducedMotion, createFlipAnimationGroup, ColorInteractiveHasFocusDirective, htmlToMarkdown, markdownToHtml, injectHasTouchInput, injectLocale, clamp, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, copyToClipboard, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, createUnsavedChangesTracker, createDocumentElementSignal, fromNextFrame, injectRoute, AnimatedIfDirective, applyInitialFocus, syncSignal, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectViewportSize, signalHostElementIntersection, setInputSignal, injectHostElement, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, injectFocusVisibleTracker } from '@ethlete/core';
+import { injectStyleManager, SurfaceInteractiveDirective, RuntimeError, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, injectErrorTheme, signalElementDimensions, createProvider, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectRenderer, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, animationDebugLog, createRootProvider, injectOverlayRuntime, injectAnimatedBlockSize, randomId, createStaticRootProvider, forceReflow, nextFrame, elementCanScroll, createSwipeTracker, createComponentId, injectObserveBreakpoint, AutoSurfaceDirective, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, createFlipAnimation, injectPrefersReducedMotion, createFlipAnimationGroup, ColorInteractiveHasFocusDirective, htmlToMarkdown, markdownToHtml, injectHasTouchInput, injectLocale, clamp, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, copyToClipboard, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, createUnsavedChangesTracker, createDocumentElementSignal, fromNextFrame, injectRoute, AnimatedIfDirective, applyInitialFocus, syncSignal, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectViewportSize, signalHostElementIntersection, setInputSignal, injectHostElement, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, injectFocusVisibleTracker } from '@ethlete/core';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgComponentOutlet, Location, isPlatformBrowser } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { endOfMonth, startOfWeek, startOfMonth, addDays, addYears, addMonths, startOfDay, isSameMonth, getDate, setDate, lastDayOfMonth, isBefore, format, isSameDay, isAfter, parse, isValid, setMilliseconds, setSeconds, setMinutes, setHours } from 'date-fns';
-import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, queryComputed } from '@ethlete/query';
-import { defer, filter, take, map, finalize, timer, switchMap, EMPTY, tap, Subject, fromEvent, merge, takeUntil, of, isObservable, from, catchError, distinctUntilChanged, concat, scan, combineLatest, debounceTime, animationFrameScheduler, exhaustMap, Observable, shareReplay, interval } from 'rxjs';
+import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, queryComputed, queryDevtoolsEntries, createQueryErrorResponse } from '@ethlete/query';
+import { defer, filter, take, map, finalize, timer, switchMap, EMPTY, tap, Subject, fromEvent, merge, takeUntil, of, isObservable, from, catchError, distinctUntilChanged, concat, scan, combineLatest, debounceTime, animationFrameScheduler, interval, exhaustMap, Observable, shareReplay } from 'rxjs';
 import { toObservable, takeUntilDestroyed, toSignal, outputToObservable, outputFromObservable, rxResource } from '@angular/core/rxjs-interop';
 import { createManagedMetadataKey, metadata, validate, FORM_FIELD } from '@angular/forms/signals';
 import { tap as tap$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/router';
 import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
+import { HttpErrorResponse } from '@angular/common/http';
 
 class ButtonPropertiesStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ButtonPropertiesStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -2912,6 +2913,7 @@ const OVERLAY_ERROR_CODES = {
     NO_CLOSEST_OVERLAY: 1205,
     NESTED_OVERLAY_MAIN: 1206,
     REF_OUTSIDE_OVERLAY: 1207,
+    MISSING_OVERLAY_MAIN: 1208,
 };
 
 const getClosestOverlay = (element, openOverlays) => {
@@ -3110,6 +3112,7 @@ class OverlayContainerComponent {
         this.appRef = inject(ApplicationRef);
         this.overlayRef = inject(OVERLAY_REF);
         this.surfaceThemes = injectSurfaceThemes({ optional: true });
+        this.surfacePrefix = injectSurfaceThemesPrefix({ optional: true });
         this.surfaceContextTracker = injectSurfaceContextTracker();
         this.renderer = injectRenderer();
         this.rootBoundary = injectBoundaryElement();
@@ -3133,9 +3136,18 @@ class OverlayContainerComponent {
             this.ownColorProvider.syncWithProvider(contextColorProvider);
         }
         if (this.surfaceThemes) {
-            const parentType = this.parentSurfaceProvider?.surfaceType() ?? 'dark';
+            // Resolve the surface the overlay's trigger visually sits on, so the overlay elevates one
+            // level above it. The trigger keeps its *declaration* injector even when projected/portaled
+            // into another overlay, so DI (`parentSurfaceProvider`) reports the wrong surface for a
+            // trigger rendered inside a dialog/menu pane, and reports nothing for the anchored panel
+            // overlays (select/menu/date) which mount with no DI link to the trigger at all. The
+            // trigger's nearest painted surface ancestor *in the DOM* is authoritative in every case —
+            // an overlay pane and a plain elevated card both carry the surface class — so read that,
+            // and fall back to DI (openers that pass a viewContainerRef but no origin).
+            const parentSurface = this.resolveOriginSurface() ?? this.parentDiSurface();
+            const parentType = parentSurface?.type ?? 'dark';
             const hasBackdrop = this.overlayRef.config.hasBackdrop ?? this.overlayRef.config.mode !== 'non-modal';
-            const elevation = hasBackdrop || !this.parentSurfaceProvider ? 1 : this.parentSurfaceProvider.elevation() + 1;
+            const elevation = hasBackdrop || !parentSurface ? 1 : parentSurface.elevation + 1;
             const resolved = resolveSurfaceByElevation(this.surfaceThemes, parentType, elevation);
             if (resolved) {
                 this.ownSurfaceProvider.forceSurface(resolved.name);
@@ -3216,6 +3228,49 @@ class OverlayContainerComponent {
      * dialog), otherwise the first painted element in the rendered content (menu/tooltip/date-picker
      * paint a nested element, potentially at a higher elevation than the host's forced surface).
      */
+    parentDiSurface() {
+        const provider = this.parentSurfaceProvider;
+        if (!provider)
+            return null;
+        return { elevation: provider.elevation(), type: provider.surfaceType() ?? 'dark' };
+    }
+    /**
+     * The surface of the nearest ancestor of the overlay's origin (trigger) that paints a resolved
+     * surface — walking the real DOM so it sees *through* the portal/projection boundary that hides
+     * the true parent surface from DI. Returns null when there is no origin element or no surfaced
+     * ancestor (the overlay then falls back to DI, and ultimately to elevation 1).
+     */
+    resolveOriginSurface() {
+        const themes = this.surfaceThemes;
+        if (!themes)
+            return null;
+        const origin = this.resolveOriginElement();
+        if (!origin)
+            return null;
+        const prefix = this.surfacePrefix || 'et';
+        const themeByClass = new Map();
+        for (const theme of themes) {
+            themeByClass.set(`${prefix}-surface--${createCssSurfaceName(theme.name)}`, theme);
+        }
+        for (let el = origin; el; el = el.parentElement) {
+            for (const cls of Array.from(el.classList)) {
+                const theme = themeByClass.get(cls);
+                if (theme)
+                    return { elevation: theme.elevation, type: theme.type };
+            }
+        }
+        return null;
+    }
+    resolveOriginElement() {
+        const origin = this.overlayRef.config.origin;
+        if (origin instanceof HTMLElement)
+            return origin;
+        if (origin instanceof Event) {
+            const target = origin.target ?? origin.currentTarget;
+            return target instanceof HTMLElement ? target : null;
+        }
+        return null;
+    }
     isSheetHost(host) {
         return (host.classList.contains('et-overlay--bottom-sheet') ||
             host.classList.contains('et-overlay--top-sheet') ||
@@ -28364,6 +28419,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const OVERLAY_MAIN_TOKEN = new InjectionToken('OVERLAY_MAIN_TOKEN');
+class OverlayMainDirective {
+    constructor() {
+        this.parent = inject(OVERLAY_MAIN_TOKEN, { optional: true, skipSelf: true });
+        this.elementRef = inject(ElementRef);
+        this.overlayRef = inject(OVERLAY_REF, { optional: true });
+        this.overlayManager = injectOverlayManager();
+        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'etOverlayMain', transform: booleanAttribute });
+    }
+    ngOnInit() {
+        this.overlayRef = resolveClosestOverlay({
+            overlayRef: this.overlayRef,
+            element: this.elementRef,
+            openOverlays: this.overlayManager.openOverlays(),
+        });
+        if (this.parent) {
+            if (this.overlayRef.id === this.parent.overlayRef?.id && this.parent.enabled() && this.enabled()) {
+                throw new RuntimeError(OVERLAY_ERROR_CODES.NESTED_OVERLAY_MAIN, '[OverlayMainDirective] An overlay must not contain nested <et-overlay-main> elements or etOverlayMain directives.');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayMainDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: OverlayMainDirective, isStandalone: true, selector: "[etOverlayMain], et-overlay-main", inputs: { enabled: { classPropertyName: "enabled", publicName: "etOverlayMain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-overlay-main": "enabled()" } }, providers: [
+            {
+                provide: OVERLAY_MAIN_TOKEN,
+                useExisting: OverlayMainDirective,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayMainDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etOverlayMain], et-overlay-main',
+                    providers: [
+                        {
+                            provide: OVERLAY_MAIN_TOKEN,
+                            useExisting: OverlayMainDirective,
+                        },
+                    ],
+                    host: {
+                        '[class.et-overlay-main]': 'enabled()',
+                    },
+                }]
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "etOverlayMain", required: false }] }] } });
+
 const OVERLAY_BODY_TOKEN = new InjectionToken('OVERLAY_BODY_TOKEN');
 class OverlayBodyComponent {
     constructor() {
@@ -28371,6 +28471,7 @@ class OverlayBodyComponent {
         this.elementRef = inject(ElementRef);
         this.scrollObserver = inject(ScrollObserverDirective);
         this.overlayManager = injectOverlayManager();
+        this.overlayMain = inject(OVERLAY_MAIN_TOKEN, { optional: true });
         this.dividers = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dividers" }] : /* istanbul ignore next */ []));
         this.dividersEnabled = computed(() => this.dividers() === 'dynamic' || this.dividers() === 'static', /* @ts-ignore */
@@ -28398,6 +28499,9 @@ class OverlayBodyComponent {
         nextFrame(() => this.enableDividerAnimations.set(true));
     }
     ngOnInit() {
+        if (!this.overlayMain) {
+            throw new RuntimeError(OVERLAY_ERROR_CODES.MISSING_OVERLAY_MAIN, '[OverlayBodyComponent] An overlay body must be used inside an <et-overlay-main> element or a host with the etOverlayMain directive.');
+        }
         this.overlayRef = resolveClosestOverlay({
             overlayRef: this.overlayRef,
             element: this.elementRef,
@@ -28610,8 +28714,12 @@ class OverlayFooterDirective {
         this.overlayRef = inject(OVERLAY_REF, { optional: true });
         this.elementRef = inject(ElementRef);
         this.overlayManager = injectOverlayManager();
+        this.overlayMain = inject(OVERLAY_MAIN_TOKEN, { optional: true });
     }
     ngOnInit() {
+        if (!this.overlayMain) {
+            throw new RuntimeError(OVERLAY_ERROR_CODES.MISSING_OVERLAY_MAIN, '[OverlayFooterDirective] An overlay footer must be used inside an <et-overlay-main> element or a host with the etOverlayMain directive.');
+        }
         this.overlayRef = resolveClosestOverlay({
             overlayRef: this.overlayRef,
             element: this.elementRef,
@@ -28648,8 +28756,12 @@ class OverlayHeaderDirective {
         this.overlayRef = inject(OVERLAY_REF, { optional: true });
         this.elementRef = inject(ElementRef);
         this.overlayManager = injectOverlayManager();
+        this.overlayMain = inject(OVERLAY_MAIN_TOKEN, { optional: true });
     }
     ngOnInit() {
+        if (!this.overlayMain) {
+            throw new RuntimeError(OVERLAY_ERROR_CODES.MISSING_OVERLAY_MAIN, '[OverlayHeaderDirective] An overlay header must be used inside an <et-overlay-main> element or a host with the etOverlayMain directive.');
+        }
         this.overlayRef = resolveClosestOverlay({
             overlayRef: this.overlayRef,
             element: this.elementRef,
@@ -28723,51 +28835,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const OVERLAY_MAIN_TOKEN = new InjectionToken('OVERLAY_MAIN_TOKEN');
-class OverlayMainDirective {
-    constructor() {
-        this.parent = inject(OVERLAY_MAIN_TOKEN, { optional: true, skipSelf: true });
-        this.elementRef = inject(ElementRef);
-        this.overlayRef = inject(OVERLAY_REF, { optional: true });
-        this.overlayManager = injectOverlayManager();
-        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'etOverlayMain', transform: booleanAttribute });
-    }
-    ngOnInit() {
-        this.overlayRef = resolveClosestOverlay({
-            overlayRef: this.overlayRef,
-            element: this.elementRef,
-            openOverlays: this.overlayManager.openOverlays(),
-        });
-        if (this.parent) {
-            if (this.overlayRef.id === this.parent.overlayRef?.id && this.parent.enabled() && this.enabled()) {
-                throw new RuntimeError(OVERLAY_ERROR_CODES.NESTED_OVERLAY_MAIN, '[OverlayMainDirective] An overlay must not contain nested <et-overlay-main> elements or etOverlayMain directives.');
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayMainDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: OverlayMainDirective, isStandalone: true, selector: "[etOverlayMain], et-overlay-main", inputs: { enabled: { classPropertyName: "enabled", publicName: "etOverlayMain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-overlay-main": "enabled()" } }, providers: [
-            {
-                provide: OVERLAY_MAIN_TOKEN,
-                useExisting: OverlayMainDirective,
-            },
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OverlayMainDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etOverlayMain], et-overlay-main',
-                    providers: [
-                        {
-                            provide: OVERLAY_MAIN_TOKEN,
-                            useExisting: OverlayMainDirective,
-                        },
-                    ],
-                    host: {
-                        '[class.et-overlay-main]': 'enabled()',
-                    },
-                }]
-        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "etOverlayMain", required: false }] }] } });
-
 const isWritableSignal = (value) => isSignal(value) && typeof value.set === 'function';
 const splitOpenerConfig = (config) => {
     const { afterClosed, beforeClosed, afterOpened, ...overlayConfig } = config ?? {};
@@ -29884,6 +29951,977 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { pageDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageDividers", required: false }] }], sidebarContent: [{ type: i0.ViewChild, args: ['sidebarContentTpl', { isSignal: true }] }], sidebarHeaderContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OVERLAY_HEADER_TEMPLATE_TOKEN), { isSignal: true }] }] } });
 
+const kindOf = (value) => {
+    if (value === null)
+        return 'null';
+    if (value === undefined)
+        return 'undefined';
+    if (Array.isArray(value))
+        return 'array';
+    return typeof value;
+};
+/**
+ * A recursive, collapsible, searchable JSON tree used by the query devtools value explorer. Renders
+ * the *transformed* value the app actually sees (post `transformResponse`). Self-recurses via its
+ * own selector.
+ */
+class QueryDevtoolsJsonComponent {
+    constructor() {
+        this.value = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.nodeKey = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeKey" }] : /* istanbul ignore next */ []));
+        this.depth = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "depth" }] : /* istanbul ignore next */ []));
+        /** Lowercased search term; when set, the tree auto-expands and matches are highlighted. */
+        this.search = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+        /** Full path of this node from the explorer root, used as the key for persisted expansion. */
+        this.path = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+        /** Persisted paths explicitly expanded (overrides the depth default). */
+        this.expandedPaths = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedPaths" }] : /* istanbul ignore next */ []));
+        /** Persisted paths explicitly collapsed (overrides the depth default). */
+        this.collapsedPaths = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsedPaths" }] : /* istanbul ignore next */ []));
+        /** When provided, expansion is externally persisted via this callback instead of local state. */
+        this.toggleFn = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toggleFn" }] : /* istanbul ignore next */ []));
+        this.kind = computed(() => kindOf(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        this.isContainer = computed(() => this.kind() === 'array' || this.kind() === 'object', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isContainer" }] : /* istanbul ignore next */ []));
+        this.entries = computed(() => {
+            const value = this.value();
+            if (Array.isArray(value))
+                return value.map((v, i) => ({ k: String(i), v }));
+            if (value && typeof value === 'object') {
+                return Object.entries(value).map(([k, v]) => ({ k, v }));
+            }
+            return [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+        this.localExpanded = linkedSignal(() => this.depth() < 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "localExpanded" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => {
+            // Externally-persisted mode: resolve from the expanded/collapsed path sets, else the depth default.
+            if (this.toggleFn()) {
+                const path = this.path();
+                if (this.collapsedPaths()?.has(path))
+                    return false;
+                if (this.expandedPaths()?.has(path))
+                    return true;
+                return this.depth() < 1;
+            }
+            return this.localExpanded();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.effectiveExpanded = computed(() => (this.search() ? true : this.expanded()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveExpanded" }] : /* istanbul ignore next */ []));
+        this.preview = computed(() => {
+            const value = this.value();
+            if (Array.isArray(value))
+                return value.length ? `[…] ${value.length}` : '[]';
+            const count = value ? Object.keys(value).length : 0;
+            return count ? `{…} ${count}` : '{}';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+        this.display = computed(() => {
+            const value = this.value();
+            const kind = this.kind();
+            if (kind === 'string')
+                return `"${value}"`;
+            if (kind === 'null')
+                return 'null';
+            if (kind === 'undefined')
+                return 'undefined';
+            return String(value);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+        this.keyHit = computed(() => {
+            const term = this.search();
+            const key = this.nodeKey();
+            return !!term && !!key && key.toLowerCase().includes(term);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyHit" }] : /* istanbul ignore next */ []));
+        this.valueHit = computed(() => {
+            const term = this.search();
+            return !!term && this.display().toLowerCase().includes(term);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueHit" }] : /* istanbul ignore next */ []));
+    }
+    childPath(key) {
+        const path = this.path();
+        return path ? `${path}.${key}` : key;
+    }
+    toggle() {
+        const toggleFn = this.toggleFn();
+        if (toggleFn) {
+            toggleFn(this.path(), !this.expanded());
+            return;
+        }
+        this.localExpanded.set(!this.localExpanded());
+    }
+    copyValue() {
+        try {
+            navigator.clipboard?.writeText(JSON.stringify(this.value(), null, 2));
+        }
+        catch {
+            // clipboard unavailable
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsJsonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsJsonComponent, isStandalone: true, selector: "et-query-devtools-json", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, nodeKey: { classPropertyName: "nodeKey", publicName: "nodeKey", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, expandedPaths: { classPropertyName: "expandedPaths", publicName: "expandedPaths", isSignal: true, isRequired: false, transformFunction: null }, collapsedPaths: { classPropertyName: "collapsedPaths", publicName: "collapsedPaths", isSignal: true, isRequired: false, transformFunction: null }, toggleFn: { classPropertyName: "toggleFn", publicName: "toggleFn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (isContainer()) {
+      <div class="et-query-devtools-json-node">
+        <button
+          [attr.aria-expanded]="effectiveExpanded()"
+          (click)="toggle()"
+          class="et-query-devtools-json-row et-query-devtools-json-toggle"
+          type="button"
+        >
+          <span class="et-query-devtools-json-caret">{{ effectiveExpanded() ? '▾' : '▸' }}</span>
+          @if (nodeKey() !== null) {
+            <span [class.et-query-devtools-json-hit]="keyHit()" class="et-query-devtools-json-key">{{
+              nodeKey()
+            }}</span>
+            <span class="et-query-devtools-json-colon">:</span>
+          }
+          <span class="et-query-devtools-json-preview">{{ preview() }}</span>
+        </button>
+
+        @if (effectiveExpanded()) {
+          <div class="et-query-devtools-json-children">
+            @for (entry of entries(); track entry.k) {
+              <et-query-devtools-json
+                [value]="entry.v"
+                [nodeKey]="entry.k"
+                [depth]="depth() + 1"
+                [path]="childPath(entry.k)"
+                [search]="search()"
+                [expandedPaths]="expandedPaths()"
+                [collapsedPaths]="collapsedPaths()"
+                [toggleFn]="toggleFn()"
+              />
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div [attr.data-kind]="kind()" class="et-query-devtools-json-row et-query-devtools-json-leaf">
+        @if (nodeKey() !== null) {
+          <span [class.et-query-devtools-json-hit]="keyHit()" class="et-query-devtools-json-key">{{ nodeKey() }}</span>
+          <span class="et-query-devtools-json-colon">:</span>
+        }
+        <span [class.et-query-devtools-json-hit]="valueHit()" class="et-query-devtools-json-value">{{
+          display()
+        }}</span>
+        <button (click)="copyValue()" class="et-query-devtools-json-copy" type="button" title="Copy value">⧉</button>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: QueryDevtoolsJsonComponent, selector: "et-query-devtools-json", inputs: ["value", "nodeKey", "depth", "search", "path", "expandedPaths", "collapsedPaths", "toggleFn"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsJsonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-query-devtools-json',
+                    template: `
+    @if (isContainer()) {
+      <div class="et-query-devtools-json-node">
+        <button
+          [attr.aria-expanded]="effectiveExpanded()"
+          (click)="toggle()"
+          class="et-query-devtools-json-row et-query-devtools-json-toggle"
+          type="button"
+        >
+          <span class="et-query-devtools-json-caret">{{ effectiveExpanded() ? '▾' : '▸' }}</span>
+          @if (nodeKey() !== null) {
+            <span [class.et-query-devtools-json-hit]="keyHit()" class="et-query-devtools-json-key">{{
+              nodeKey()
+            }}</span>
+            <span class="et-query-devtools-json-colon">:</span>
+          }
+          <span class="et-query-devtools-json-preview">{{ preview() }}</span>
+        </button>
+
+        @if (effectiveExpanded()) {
+          <div class="et-query-devtools-json-children">
+            @for (entry of entries(); track entry.k) {
+              <et-query-devtools-json
+                [value]="entry.v"
+                [nodeKey]="entry.k"
+                [depth]="depth() + 1"
+                [path]="childPath(entry.k)"
+                [search]="search()"
+                [expandedPaths]="expandedPaths()"
+                [collapsedPaths]="collapsedPaths()"
+                [toggleFn]="toggleFn()"
+              />
+            }
+          </div>
+        }
+      </div>
+    } @else {
+      <div [attr.data-kind]="kind()" class="et-query-devtools-json-row et-query-devtools-json-leaf">
+        @if (nodeKey() !== null) {
+          <span [class.et-query-devtools-json-hit]="keyHit()" class="et-query-devtools-json-key">{{ nodeKey() }}</span>
+          <span class="et-query-devtools-json-colon">:</span>
+        }
+        <span [class.et-query-devtools-json-hit]="valueHit()" class="et-query-devtools-json-value">{{
+          display()
+        }}</span>
+        <button (click)="copyValue()" class="et-query-devtools-json-copy" type="button" title="Copy value">⧉</button>
+      </div>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [QueryDevtoolsJsonComponent],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], expandedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedPaths", required: false }] }], collapsedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedPaths", required: false }] }], toggleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleFn", required: false }] }] } });
+
+/**
+ * The floating toggle button for the query devtools. Rendered with `ShadowDom` encapsulation so the
+ * host application's global CSS (Tailwind resets, button styles, …) can never touch it and its own
+ * styles can never leak out. Uses px (not rem) internally so it doesn't depend on the host's root
+ * font-size; theme accent colour is read from an inherited custom property with a fallback.
+ */
+class QueryDevtoolsToggleComponent {
+    constructor() {
+        this.openChange = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", outputs: { openChange: "openChange" }, ngImport: i0, template: `
+    <button (click)="openChange.emit()" type="button" title="Toggle query devtools (Ctrl/Cmd + Alt + Q)">
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <ellipse cx="12" cy="6" rx="7.5" ry="3" />
+        <path d="M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6" />
+        <path d="M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6" />
+      </svg>
+      <span class="label">Query</span>
+    </button>
+  `, isInline: true, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483001}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-query-devtools-toggle', template: `
+    <button (click)="openChange.emit()" type="button" title="Toggle query devtools (Ctrl/Cmd + Alt + Q)">
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <ellipse cx="12" cy="6" rx="7.5" ry="3" />
+        <path d="M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6" />
+        <path d="M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6" />
+      </svg>
+      <span class="label">Query</span>
+    </button>
+  `, encapsulation: ViewEncapsulation.ShadowDom, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483001}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}\n"] }]
+        }], propDecorators: { openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+
+const STORAGE_KEY = 'ethlete:query:devtools:v4';
+const MAX_EVENTS = 100;
+const DEFAULT_HEIGHT = 360;
+const MIN_HEIGHT = 200;
+const readPersistedState = () => {
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY);
+        return raw ? JSON.parse(raw) : {};
+    }
+    catch {
+        return {};
+    }
+};
+/**
+ * Slims a value for a shareable report: long strings are truncated and long arrays keep only the
+ * first couple of entries, replacing the repetitive tail with a `… (N more)` marker, so a big
+ * response collapses to a representative sample.
+ */
+const slimForReport = (value, depth = 0) => {
+    if (typeof value === 'string')
+        return value.length > 200 ? `${value.slice(0, 200)}…` : value;
+    if (depth > 6)
+        return '…';
+    if (Array.isArray(value)) {
+        if (value.length > 3) {
+            return [...value.slice(0, 2).map((v) => slimForReport(v, depth + 1)), `… (${value.length - 2} more)`];
+        }
+        return value.map((v) => slimForReport(v, depth + 1));
+    }
+    if (value && typeof value === 'object') {
+        const out = {};
+        for (const [key, val] of Object.entries(value))
+            out[key] = slimForReport(val, depth + 1);
+        return out;
+    }
+    return value;
+};
+/** Best-effort decode of a JWT payload for the auth tab. Returns `null` for anything non-decodable. */
+const decodeJwtPayload = (token) => {
+    if (!token)
+        return null;
+    try {
+        const payload = token.split('.')[1];
+        if (!payload)
+            return null;
+        const normalized = payload.replace(/-/g, '+').replace(/_/g, '/');
+        const decoded = atob(normalized);
+        const json = decodeURIComponent(decoded
+            .split('')
+            .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+            .join(''));
+        return JSON.parse(json);
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * A floating, dockable panel that inspects the live state of the signals-first `@ethlete/query`
+ * system: queries, stacks, sequences, bearer auth providers, the repository cache and a rolling
+ * event log.
+ *
+ * Requires `provideQueryDevtools()` in the application providers — without it the registry stays
+ * empty and the panel shows nothing.
+ */
+class QueryDevtoolsComponent {
+    constructor() {
+        this.hostEl = inject(ElementRef);
+        this.document = inject(DOCUMENT$1);
+        this.eventIdCounter = 0;
+        this.lastSelectionKey = '';
+        this.persisted = readPersistedState();
+        this.tabs = [
+            { id: 'queries', label: 'Queries' },
+            { id: 'stacks', label: 'Stacks' },
+            { id: 'sequences', label: 'Sequences' },
+            { id: 'auth', label: 'Auth' },
+            { id: 'ws', label: 'Sockets' },
+            { id: 'cache', label: 'Cache' },
+            { id: 'events', label: 'Events' },
+        ];
+        this.open = signal(this.persisted.open ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.panelHeight = signal(this.persisted.height ?? DEFAULT_HEIGHT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelHeight" }] : /* istanbul ignore next */ []));
+        this.resizing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
+        this.activeTab = signal(this.persisted.activeTab ?? 'queries', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        this.selectedClientName = signal(this.persisted.selectedClientName ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedClientName" }] : /* istanbul ignore next */ []));
+        this.selectedQueryId = signal(this.persisted.selectedQueryId ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedQueryId" }] : /* istanbul ignore next */ []));
+        // Independent per-drawer selection so the Stacks / Sequences drawers don't share the Queries tab's.
+        this.stackSelectedQueryId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stackSelectedQueryId" }] : /* istanbul ignore next */ []));
+        this.sequenceSelectedQueryId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sequenceSelectedQueryId" }] : /* istanbul ignore next */ []));
+        this.eventLog = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eventLog" }] : /* istanbul ignore next */ []));
+        /** Keys (`<entryId>:<stepIndex>`) of the sequence steps whose in/out detail is expanded. */
+        this.expandedSteps = signal(new Set(this.persisted.expandedSteps ?? []), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedSteps" }] : /* istanbul ignore next */ []));
+        /** Shared value-explorer search term. */
+        this.jsonSearch = signal(this.persisted.jsonSearch ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jsonSearch" }] : /* istanbul ignore next */ []));
+        this.jsonSearchTerm = computed(() => this.jsonSearch().trim().toLowerCase(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jsonSearchTerm" }] : /* istanbul ignore next */ []));
+        /** Path-keyed value-explorer expansion overrides (persisted so open trees survive a reload). */
+        this.jsonExpandedPaths = signal(new Set(this.persisted.jsonExpanded ?? []), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jsonExpandedPaths" }] : /* istanbul ignore next */ []));
+        this.jsonCollapsedPaths = signal(new Set(this.persisted.jsonCollapsed ?? []), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "jsonCollapsedPaths" }] : /* istanbul ignore next */ []));
+        /** JIT editor state (response / args editing on the selected query). */
+        this.editorMode = signal('none', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorMode" }] : /* istanbul ignore next */ []));
+        this.responseDraft = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "responseDraft" }] : /* istanbul ignore next */ []));
+        this.argsDraft = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "argsDraft" }] : /* istanbul ignore next */ []));
+        this.editError = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editError" }] : /* istanbul ignore next */ []));
+        /** Transient "Copied!" feedback for the copy-report action. */
+        this.copiedReport = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copiedReport" }] : /* istanbul ignore next */ []));
+        /** 1-second tick driving the cache freshness countdowns. */
+        this.clock = toSignal(interval(1000), { initialValue: 0 });
+        /** "Inspect" mode: hover the live UI to find the query that a component created. */
+        this.inspectActive = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inspectActive" }] : /* istanbul ignore next */ []));
+        this.inspectHover = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inspectHover" }] : /* istanbul ignore next */ []));
+        /** When set (via inspect), the Queries list is filtered to exactly these entry ids. */
+        this.inspectFilterIds = signal(this.persisted.inspectFilterIds ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inspectFilterIds" }] : /* istanbul ignore next */ []));
+        this.queryEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'query'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "queryEntries" }] : /* istanbul ignore next */ []));
+        this.stackEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'query-stack' || e.kind === 'paged-query-stack'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stackEntries" }] : /* istanbul ignore next */ []));
+        this.sequenceEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'query-sequence'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sequenceEntries" }] : /* istanbul ignore next */ []));
+        this.authEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'auth-provider'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "authEntries" }] : /* istanbul ignore next */ []));
+        this.wsEntries = computed(() => queryDevtoolsEntries().filter((e) => e.kind === 'ws-client'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wsEntries" }] : /* istanbul ignore next */ []));
+        /** Unique client names present across queries and auth providers, for the Queries-tab picker. */
+        this.clientNames = computed(() => {
+            const names = new Set();
+            for (const entry of queryDevtoolsEntries()) {
+                if (entry.meta.clientName)
+                    names.add(entry.meta.clientName);
+            }
+            return Array.from(names).sort();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clientNames" }] : /* istanbul ignore next */ []));
+        /** Unique repositories (with their client name + base URL) used by the Cache and Events tabs. */
+        this.repositories = computed(() => {
+            const map = new Map();
+            for (const entry of queryDevtoolsEntries()) {
+                const repo = entry.meta.repository;
+                if (repo && !map.has(repo)) {
+                    map.set(repo, { name: entry.meta.clientName ?? 'unknown', baseUrl: entry.meta.clientBaseUrl ?? '' });
+                }
+            }
+            return Array.from(map, ([repository, info]) => ({ repository, name: info.name, baseUrl: info.baseUrl }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "repositories" }] : /* istanbul ignore next */ []));
+        this.filteredQueries = computed(() => {
+            const entries = this.queryEntries();
+            const inspectIds = this.inspectFilterIds();
+            let filtered;
+            if (inspectIds) {
+                filtered = entries.filter((e) => inspectIds.includes(e.id));
+            }
+            else {
+                const client = this.selectedClientName();
+                filtered = client ? entries.filter((e) => e.meta.clientName === client) : entries;
+            }
+            return filtered.map((entry) => ({ entry, query: entry.handle }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredQueries" }] : /* istanbul ignore next */ []));
+        this.selectedQuery = computed(() => this.findQuery(this.selectedQueryId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedQuery" }] : /* istanbul ignore next */ []));
+        this.stackSelectedQuery = computed(() => this.findQuery(this.stackSelectedQueryId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stackSelectedQuery" }] : /* istanbul ignore next */ []));
+        this.sequenceSelectedQuery = computed(() => this.findQuery(this.sequenceSelectedQueryId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sequenceSelectedQuery" }] : /* istanbul ignore next */ []));
+        this.cacheView = computed(() => this.repositories().map(({ repository, name, baseUrl }) => {
+            // Read the version signal so this recomputes on every cache mutation.
+            repository.subtle.cacheVersion();
+            return { name, baseUrl, repository, entries: repository.subtle.cacheEntries() };
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cacheView" }] : /* istanbul ignore next */ []));
+        /** Map of a component's host element to the query entries it created (for the inspect tool). */
+        this.elementQueryMap = computed(() => {
+            const map = new Map();
+            for (const entry of this.queryEntries()) {
+                const el = entry.meta.element;
+                if (!el)
+                    continue;
+                const list = map.get(el);
+                if (list)
+                    list.push(entry);
+                else
+                    map.set(el, [entry]);
+            }
+            return map;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "elementQueryMap" }] : /* istanbul ignore next */ []));
+        // Assigned here (not as an arrow property) so `this` is bound for the value-explorer callback.
+        this.toggleJsonPath = (path, expand) => {
+            const expanded = new Set(this.jsonExpandedPaths());
+            const collapsed = new Set(this.jsonCollapsedPaths());
+            if (expand) {
+                expanded.add(path);
+                collapsed.delete(path);
+            }
+            else {
+                collapsed.add(path);
+                expanded.delete(path);
+            }
+            this.jsonExpandedPaths.set(expanded);
+            this.jsonCollapsedPaths.set(collapsed);
+        };
+        // Merge every live repository's event stream into the rolling log, re-subscribing as the set of
+        // repositories changes. Composed with RxJS (not a subscribe-in-effect) per the styleguide.
+        toObservable(this.repositories)
+            .pipe(switchMap((repos) => merge(...repos.map(({ repository, name, baseUrl }) => repository.events$.pipe(map((event) => ({ event, client: baseUrl || name })))))), tap(({ event, client }) => this.pushEvent(event, client)), takeUntilDestroyed())
+            .subscribe();
+        effect(() => {
+            const state = {
+                open: this.open(),
+                height: this.panelHeight(),
+                activeTab: this.activeTab(),
+                selectedClientName: this.selectedClientName(),
+                selectedQueryId: this.selectedQueryId(),
+                inspectFilterIds: this.inspectFilterIds(),
+                jsonSearch: this.jsonSearch(),
+                expandedSteps: [...this.expandedSteps()],
+                jsonExpanded: [...this.jsonExpandedPaths()],
+                jsonCollapsed: [...this.jsonCollapsedPaths()],
+            };
+            try {
+                sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+            }
+            catch {
+                // ignore (private mode / disabled storage)
+            }
+        });
+        // Close any open JIT editor on any selection / tab change, and reset the value-explorer search
+        // when the *selected query* actually changes (but not on the initial restore, so a persisted
+        // search survives a reload).
+        this.lastSelectionKey = this.selectionKey();
+        effect(() => {
+            const key = this.selectionKey();
+            this.activeTab();
+            this.editorMode.set('none');
+            this.editError.set(null);
+            this.copiedReport.set(false);
+            if (key !== this.lastSelectionKey) {
+                this.lastSelectionKey = key;
+                this.jsonSearch.set('');
+            }
+        });
+        const doc = this.document;
+        // Global toggle shortcut: Ctrl/Cmd + Alt + Q ("Q" for Query) — uncommon, no browser/OS conflict.
+        fromEvent(doc, 'keydown')
+            .pipe(filter((e) => (e.ctrlKey || e.metaKey) && e.altKey && e.key.toLowerCase() === 'q'), tap((e) => {
+            e.preventDefault();
+            this.open.update((v) => !v);
+        }), takeUntilDestroyed())
+            .subscribe();
+        // Drag-to-resize: while a resize is in progress, track pointer movement on the document.
+        toObservable(this.resizing)
+            .pipe(switchMap((active) => active
+            ? merge(fromEvent(doc, 'pointermove').pipe(tap((e) => this.applyResize(e))), fromEvent(doc, 'pointerup').pipe(tap(() => this.resizing.set(false))))
+            : EMPTY), takeUntilDestroyed())
+            .subscribe();
+        // Inspect mode: while active, listen on the document to map the hovered element to a query.
+        const capture = { capture: true };
+        toObservable(this.inspectActive)
+            .pipe(tap((active) => {
+            if (!active)
+                this.inspectHover.set(null);
+        }), switchMap((active) => active
+            ? merge(fromEvent(doc, 'mousemove', capture).pipe(tap((e) => this.updateInspectHover(e))), fromEvent(doc, 'click', capture).pipe(tap((e) => this.selectInspectedQuery(e))), fromEvent(doc, 'keydown', capture).pipe(tap((e) => {
+                if (e.key === 'Escape')
+                    this.inspectActive.set(false);
+            })))
+            : EMPTY), takeUntilDestroyed())
+            .subscribe();
+    }
+    toggleOpen() {
+        this.open.update((v) => !v);
+    }
+    clearEvents() {
+        this.eventLog.set([]);
+    }
+    selectClient(name) {
+        this.selectedClientName.set(name);
+        this.inspectFilterIds.set(null);
+    }
+    clearInspectFilter() {
+        this.inspectFilterIds.set(null);
+    }
+    toggleInspect() {
+        this.inspectActive.update((v) => !v);
+    }
+    startResize(event) {
+        event.preventDefault();
+        this.resizing.set(true);
+    }
+    inspectLabel(entries) {
+        const first = entries[0];
+        if (entries.length === 1 && first)
+            return `${first.meta.method ?? ''} ${first.meta.route ?? ''}`.trim();
+        return `${entries.length} queries`;
+    }
+    queryStatus(query) {
+        const state = query.executionState();
+        if (!state)
+            return 'idle';
+        if (state.type === 'loading')
+            return 'loading';
+        if (state.type === 'failure')
+            return 'error';
+        return 'success';
+    }
+    isStale(query) {
+        try {
+            return query.subtle.request()?.isStale() ?? false;
+        }
+        catch {
+            return false;
+        }
+    }
+    executeQuery(query, allowCache) {
+        query.execute(allowCache ? { options: { allowCache: true } } : undefined);
+    }
+    resetQuery(query) {
+        query.reset();
+    }
+    /**
+     * Copies a shareable report (path, args, status, slimmed response) for handing to an API dev.
+     * Writes both rich `text/html` (Slack applies formatting on paste — it does not parse markdown) and
+     * a plain-text fallback.
+     */
+    copyReport(entry, query) {
+        const error = query.error();
+        const httpStatus = error ? error.raw.status : this.responseStatus(query);
+        const method = entry.meta.method ?? '';
+        const route = entry.meta.route || '—';
+        const client = entry.meta.clientBaseUrl ?? entry.meta.clientName ?? '';
+        const statusLine = `status: ${this.queryStatus(query)}${httpStatus !== null ? ` (${httpStatus})` : ''} · ${this.formatTime(query.lastTimeExecutedAt())}`;
+        const gqlDoc = entry.meta.gqlQuery ? this.gqlDocument(entry.meta.gqlQuery) : null;
+        const args = query.args();
+        const argsLabel = gqlDoc ? 'Variables' : 'Args';
+        const argsJson = args !== null && args !== undefined ? JSON.stringify(args, null, 2) : null;
+        const bodyLabel = error ? `Error (${error.raw.status})` : 'Response';
+        const bodyContent = error
+            ? error.isList
+                ? error.errors.map((e) => e.message).join('\n')
+                : error.error.message
+            : JSON.stringify(slimForReport(query.response()), null, 2);
+        const textParts = [`${method} ${route}${client ? ` — ${client}` : ''}`, statusLine];
+        if (gqlDoc)
+            textParts.push('', 'GraphQL document', gqlDoc);
+        if (argsJson)
+            textParts.push('', argsLabel, argsJson);
+        textParts.push('', bodyLabel, bodyContent);
+        const text = textParts.join('\n');
+        const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        const htmlParts = [
+            `<b>${esc(method)}</b> <code>${esc(route)}</code>${client ? ` — <code>${esc(client)}</code>` : ''}`,
+            esc(statusLine),
+        ];
+        if (gqlDoc)
+            htmlParts.push('<b>GraphQL document</b>', `<pre><code>${esc(gqlDoc)}</code></pre>`);
+        if (argsJson)
+            htmlParts.push(`<b>${argsLabel}</b>`, `<pre><code>${esc(argsJson)}</code></pre>`);
+        htmlParts.push(`<b>${esc(bodyLabel)}</b>`, `<pre><code>${esc(bodyContent)}</code></pre>`);
+        const html = htmlParts.join('<br>');
+        this.writeToClipboard(html, text);
+    }
+    // --- JIT editing ---
+    openResponseEditor(query) {
+        this.responseDraft.set(JSON.stringify(query.response() ?? null, null, 2));
+        this.editError.set(null);
+        this.editorMode.set('response');
+    }
+    openArgsEditor(query) {
+        this.argsDraft.set(JSON.stringify(query.args() ?? {}, null, 2));
+        this.editError.set(null);
+        this.editorMode.set('args');
+    }
+    applyResponse(query) {
+        try {
+            query.subtle.setResponse(JSON.parse(this.responseDraft()));
+            this.editorMode.set('none');
+            this.editError.set(null);
+        }
+        catch {
+            this.editError.set('Invalid JSON');
+        }
+    }
+    applyArgs(query) {
+        try {
+            query.execute({ args: JSON.parse(this.argsDraft()) });
+            this.editorMode.set('none');
+            this.editError.set(null);
+        }
+        catch {
+            this.editError.set('Invalid JSON');
+        }
+    }
+    cancelEditor() {
+        this.editorMode.set('none');
+        this.editError.set(null);
+    }
+    // --- Force states ---
+    forceLoading(query) {
+        // `executionState` prioritises loading > error > response, so clear the others to switch cleanly.
+        query.subtle.setError(null);
+        query.subtle.setLoading({ executeTime: Date.now(), progress: null });
+    }
+    forceError(query) {
+        query.subtle.setLoading(null);
+        // A real failed execution also drops the response, so mirror that for consumers bound to it.
+        query.subtle.setResponse(null);
+        query.subtle.setError(createQueryErrorResponse(new HttpErrorResponse({
+            status: 500,
+            statusText: 'Forced',
+            error: { message: 'Forced error (devtools)' },
+        })));
+    }
+    forceEmpty(query) {
+        query.subtle.setLoading(null);
+        query.subtle.setError(null);
+        query.subtle.setResponse(null);
+    }
+    clearForced(query) {
+        query.subtle.setLoading(null);
+        query.subtle.setError(null);
+    }
+    // --- Cache actions ---
+    refetchCacheEntry(entry) {
+        entry.request.execute();
+    }
+    evictCacheEntry(repository, key) {
+        repository.subtle.evict(key);
+    }
+    cacheFreshness(entry) {
+        this.clock();
+        if (entry.request.loading())
+            return 'refreshing…';
+        const expiresAt = entry.request.expiresAt();
+        if (expiresAt === null)
+            return 'uncacheable';
+        const ms = expiresAt - Date.now();
+        return ms <= 0 ? 'stale' : `${Math.ceil(ms / 1000)}s`;
+    }
+    /** The path + query of a request URL (origin stripped), for readable cache/event identifiers. */
+    requestPath(url) {
+        try {
+            const parsed = new URL(url);
+            return parsed.pathname + parsed.search;
+        }
+        catch {
+            return url;
+        }
+    }
+    // --- Typed template accessors (entry.handle is `unknown`) ---
+    asStack(entry) {
+        return entry.handle;
+    }
+    asPagedStack(entry) {
+        return entry.handle;
+    }
+    asSequence(entry) {
+        return entry.handle.current;
+    }
+    asAuth(entry) {
+        return entry.handle;
+    }
+    asWs(entry) {
+        return entry.handle;
+    }
+    /** Derives the per-step status of a sequence step from its live progress signals. */
+    sequenceStepStatus(sequence, index) {
+        const failedAt = sequence.failedAt();
+        if (failedAt !== null && index === failedAt)
+            return 'error';
+        const current = sequence.currentStep();
+        const running = sequence.running();
+        if (index < current - 1)
+            return 'success';
+        if (index === current - 1 && running)
+            return 'running';
+        if (sequence.status() === 'success')
+            return 'success';
+        return 'idle';
+    }
+    authTokenPayload(auth) {
+        return decodeJwtPayload(auth.accessToken());
+    }
+    queriesForStack(stack) {
+        const inner = stack.queries();
+        const queryEntries = this.queryEntries();
+        return inner.map((query) => {
+            const entry = queryEntries.find((e) => e.handle === query);
+            return {
+                id: entry?.id ?? '',
+                query: query,
+                method: entry?.meta.method ?? '',
+                route: entry?.meta.route ?? '',
+                clientName: entry?.meta.clientName ?? '',
+                clientBaseUrl: entry?.meta.clientBaseUrl ?? '',
+            };
+        });
+    }
+    /** Identifying info for a stack, derived from its (uniform) inner queries. */
+    stackIdentity(stack) {
+        const first = this.queriesForStack(stack)[0];
+        return { method: first?.method ?? '', route: first?.route ?? '', baseUrl: first?.clientBaseUrl ?? '' };
+    }
+    authFeatures(auth) {
+        return Object.keys(auth.features ?? {});
+    }
+    authQueryKeys(auth) {
+        return Object.keys(auth.queries ?? {});
+    }
+    /** Countdown to the access-token's `exp` (the point a refresh becomes due), or `null` if unknown. */
+    authTokenExpiry(auth) {
+        this.clock();
+        const payload = decodeJwtPayload(auth.accessToken());
+        const exp = typeof payload?.['exp'] === 'number' ? payload['exp'] : null;
+        if (exp === null)
+            return null;
+        const seconds = Math.round((exp * 1000 - Date.now()) / 1000);
+        if (seconds <= 0)
+            return 'expired';
+        if (seconds < 120)
+            return `${seconds}s`;
+        if (seconds > 86400)
+            return `${Math.floor(seconds / 86400)}d`;
+        return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+    }
+    queriesForSequence(sequence) {
+        const queryEntries = this.queryEntries();
+        return sequence.queries.map((query) => {
+            const entry = queryEntries.find((e) => e.handle === query);
+            return {
+                id: entry?.id ?? '',
+                query: query,
+                method: entry?.meta.method ?? '',
+                route: entry?.meta.route ?? '',
+            };
+        });
+    }
+    /** The snapshot of a sequence step, once it has run (holds the args in and the response/error out). */
+    stepSnapshot(sequence, index) {
+        return sequence.snapshots()[index] ?? null;
+    }
+    isStepExpanded(entryId, index) {
+        return this.expandedSteps().has(this.stepKey(entryId, index));
+    }
+    toggleStep(entryId, index) {
+        const key = this.stepKey(entryId, index);
+        const next = new Set(this.expandedSteps());
+        if (next.has(key)) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        this.expandedSteps.set(next);
+    }
+    /** Dedents a GraphQL document (template-literal indentation) for readable display. */
+    gqlDocument(doc) {
+        const lines = doc.replace(/\t/g, '  ').split('\n');
+        while (lines.length && !lines[0]?.trim())
+            lines.shift();
+        while (lines.length && !lines[lines.length - 1]?.trim())
+            lines.pop();
+        const indents = lines.filter((l) => l.trim()).map((l) => l.match(/^ */)?.[0].length ?? 0);
+        const min = indents.length ? Math.min(...indents) : 0;
+        return lines.map((l) => l.slice(min)).join('\n');
+    }
+    featureLabel(type) {
+        return type
+            .replace(/^WITH_/, '')
+            .replace(/_/g, ' ')
+            .toLowerCase();
+    }
+    formatTime(timestamp) {
+        if (!timestamp)
+            return '—';
+        return new Date(timestamp).toLocaleTimeString(undefined, { hour12: false });
+    }
+    stepKey(entryId, index) {
+        return `${entryId}:${index}`;
+    }
+    applyResize(event) {
+        // The panel is docked to the bottom, so its height is the distance from the pointer to the viewport bottom.
+        const viewport = this.document.documentElement.clientHeight;
+        const next = viewport - event.clientY;
+        const max = Math.round(viewport * 0.9);
+        this.panelHeight.set(Math.min(Math.max(next, MIN_HEIGHT), max));
+    }
+    updateInspectHover(event) {
+        const host = this.hostEl.nativeElement;
+        const map = this.elementQueryMap();
+        let node = event.target;
+        // Ignore the devtools UI itself.
+        if (node && host.contains(node)) {
+            this.inspectHover.set(null);
+            return;
+        }
+        while (node) {
+            const entries = map.get(node);
+            if (entries) {
+                this.inspectHover.set({ rect: node.getBoundingClientRect(), entries });
+                return;
+            }
+            node = node.parentElement;
+        }
+        this.inspectHover.set(null);
+    }
+    selectInspectedQuery(event) {
+        const hover = this.inspectHover();
+        const first = hover?.entries[0];
+        if (!hover || !first)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const ids = hover.entries.map((e) => e.id);
+        this.open.set(true);
+        this.activeTab.set('queries');
+        this.selectedClientName.set(null);
+        this.inspectFilterIds.set(ids);
+        // Auto-select when the element owns a single query, otherwise let the user pick from the filtered list.
+        this.selectedQueryId.set(ids.length === 1 ? first.id : null);
+        this.inspectActive.set(false);
+    }
+    selectionKey() {
+        return `${this.selectedQueryId()}|${this.stackSelectedQueryId()}|${this.sequenceSelectedQueryId()}`;
+    }
+    writeToClipboard(html, text) {
+        const clipboard = navigator.clipboard;
+        if (!clipboard)
+            return;
+        // Prefer rich HTML (Slack keeps the formatting on paste); fall back to plain text.
+        if ('write' in clipboard && typeof ClipboardItem !== 'undefined') {
+            const item = new ClipboardItem({
+                'text/html': new Blob([html], { type: 'text/html' }),
+                'text/plain': new Blob([text], { type: 'text/plain' }),
+            });
+            clipboard
+                .write([item])
+                .then(() => this.copiedReport.set(true))
+                .catch(() => clipboard
+                .writeText(text)
+                .then(() => this.copiedReport.set(true))
+                .catch(() => undefined));
+            return;
+        }
+        clipboard
+            .writeText(text)
+            .then(() => this.copiedReport.set(true))
+            .catch(() => undefined);
+    }
+    responseStatus(query) {
+        const event = query.latestHttpEvent();
+        return typeof event?.status === 'number' ? event.status : null;
+    }
+    findQuery(id) {
+        if (!id)
+            return null;
+        const entry = this.queryEntries().find((e) => e.id === id);
+        return entry ? { entry, query: entry.handle } : null;
+    }
+    pushEvent(event, client) {
+        const item = {
+            id: this.eventIdCounter++,
+            timestamp: Date.now(),
+            client,
+            type: event.type,
+            method: event.request.method,
+            url: event.request.url,
+            isSecure: event.isSecure,
+            status: event.type === 'request-error' ? event.error.status : null,
+        };
+        this.eventLog.update((log) => [item, ...log].slice(0, MAX_EVENTS));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", host: { classAttribute: "et-query-devtools-host" }, ngImport: i0, template: "@if (open()) {\n  <section\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [style.height.px]=\"panelHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <div\n      (pointerdown)=\"startResize($event)\"\n      class=\"et-query-devtools-resize\"\n      title=\"Drag to resize\"\n      aria-hidden=\"true\"\n    ></div>\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of tabs; track tab.id) {\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n          </button>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          \u2316 Inspect\n        </button>\n        <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close\" type=\"button\" title=\"Close devtools\">\u2715</button>\n      </div>\n    </header>\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <div class=\"et-query-devtools-master-detail\">\n            <div class=\"et-query-devtools-list\">\n              <div class=\"et-query-devtools-toolbar\">\n                @if (inspectFilterIds(); as ids) {\n                  <span class=\"et-query-devtools-filter-chip\">\u2316 inspected \u00B7 {{ ids.length }}</span>\n                  <button (click)=\"clearInspectFilter()\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n                } @else {\n                  <label class=\"et-query-devtools-field\">\n                    <span>Client</span>\n                    <select\n                      #clientSelect\n                      [value]=\"selectedClientName() ?? ''\"\n                      (change)=\"selectClient(clientSelect.value || null)\"\n                      class=\"et-query-devtools-select\"\n                    >\n                      <option value=\"\">All clients</option>\n                      @for (name of clientNames(); track name) {\n                        <option [value]=\"name\">{{ name }}</option>\n                      }\n                    </select>\n                  </label>\n                }\n                <span class=\"et-query-devtools-count\">{{ filteredQueries().length }}</span>\n              </div>\n\n              @for (item of filteredQueries(); track item.entry.id) {\n                <button\n                  [class.et-query-devtools-row--active]=\"selectedQueryId() === item.entry.id\"\n                  (click)=\"selectedQueryId.set(item.entry.id)\"\n                  class=\"et-query-devtools-row\"\n                  type=\"button\"\n                >\n                  <span\n                    [attr.data-status]=\"queryStatus(item.query)\"\n                    [title]=\"queryStatus(item.query)\"\n                    class=\"et-query-devtools-status\"\n                  ></span>\n                  <span class=\"et-query-devtools-method\">{{ item.entry.meta.method }}</span>\n                  <span class=\"et-query-devtools-route\">{{ item.entry.meta.route || '\u2014' }}</span>\n                  @if (isStale(item.query)) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">stale</span>\n                  }\n                </button>\n              } @empty {\n                @if (inspectFilterIds()) {\n                  <p class=\"et-query-devtools-empty\">\n                    The inspected element's queries are no longer registered. Reset the filter.\n                  </p>\n                } @else {\n                  <p class=\"et-query-devtools-empty\">No queries registered.</p>\n                }\n              }\n            </div>\n\n            <div class=\"et-query-devtools-detail\">\n              @if (selectedQuery(); as sel) {\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              } @else {\n                <p class=\"et-query-devtools-empty\">Select a query to inspect it.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of stackEntries(); track entry.id) {\n                @if (entry.kind === 'paged-query-stack') {\n                  @let paged = asPagedStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">paged stack</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ paged.direction() }}</span>\n                      @if (paged.loading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                    </div>\n\n                    @let pagedId = stackIdentity(paged);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ pagedId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ pagedId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ pagedId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Pages loaded</dt>\n                      <dd>{{ paged.queries().length }}</dd>\n                      <dt>Items</dt>\n                      <dd>{{ paged.items().length }}</dd>\n                      <dt>First page loaded</dt>\n                      <dd>{{ paged.isFirstPageLoaded() }}</dd>\n                      <dt>Last page loaded</dt>\n                      <dd>{{ paged.isLastPageLoaded() }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(paged) }\" />\n                  </div>\n                } @else {\n                  @let stack = asStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">stack</span>\n                      @if (stack.anyLoading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                      @if (stack.anyError()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">error</span>\n                      }\n                    </div>\n\n                    @let stackId = stackIdentity(stack);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ stackId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ stackId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ stackId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Queries</dt>\n                      <dd>{{ stack.queries().length }}</dd>\n                      <dt>Loading</dt>\n                      <dd>{{ stack.loadingProgress().loaded }} / {{ stack.loadingProgress().total }}</dd>\n                      <dt>Errors</dt>\n                      <dd>{{ stack.errors().length }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(stack) }\" />\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No stacks registered.</p>\n              }\n            </div>\n\n            @if (stackSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"stackSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of sequenceEntries(); track entry.id) {\n                @let sequence = asSequence(entry);\n                @if (sequence) {\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">sequence</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ sequence.status() }}</span>\n                      <span class=\"et-query-devtools-count\"\n                        >step {{ sequence.currentStep() }} / {{ sequence.total }}</span\n                      >\n                    </div>\n\n                    <ol class=\"et-query-devtools-step-list\">\n                      @for (link of queriesForSequence(sequence); track $index; let i = $index) {\n                        <li [attr.data-status]=\"sequenceStepStatus(sequence, i)\" class=\"et-query-devtools-step-item\">\n                          <div class=\"et-query-devtools-step-head\">\n                            <button\n                              [class.et-query-devtools-inner-row--active]=\"sequenceSelectedQueryId() === link.id\"\n                              [disabled]=\"!link.id\"\n                              (click)=\"sequenceSelectedQueryId.set(link.id)\"\n                              class=\"et-query-devtools-inner-row\"\n                              type=\"button\"\n                            >\n                              <span\n                                [attr.data-status]=\"sequenceStepStatus(sequence, i)\"\n                                class=\"et-query-devtools-status\"\n                              ></span>\n                              <span class=\"et-query-devtools-method\">{{ i + 1 }}. {{ link.method }}</span>\n                              <span class=\"et-query-devtools-route\">{{ link.route || 'step ' + (i + 1) }}</span>\n                            </button>\n                            <button\n                              [attr.aria-expanded]=\"isStepExpanded(entry.id, i)\"\n                              (click)=\"toggleStep(entry.id, i)\"\n                              class=\"et-query-devtools-step-caret-btn\"\n                              type=\"button\"\n                              title=\"Toggle in / out\"\n                            >\n                              {{ isStepExpanded(entry.id, i) ? '\u25BE' : '\u25B8' }}\n                            </button>\n                          </div>\n\n                          @if (isStepExpanded(entry.id, i)) {\n                            @let snap = stepSnapshot(sequence, i);\n                            <div class=\"et-query-devtools-step-io\">\n                              <h5 class=\"et-query-devtools-section\">In \u00B7 args</h5>\n                              @if (sequence.stepArgs().length > i) {\n                                <et-query-devtools-json [value]=\"sequence.stepArgs()[i]\" />\n                              } @else {\n                                <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                              }\n\n                              @if (snap?.error(); as error) {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 error ({{ error.raw.status }})</h5>\n                                <et-query-devtools-json [value]=\"error.isList ? error.errors : error.error\" />\n                              } @else {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 response</h5>\n                                @if (snap) {\n                                  <et-query-devtools-json [value]=\"snap.response()\" />\n                                } @else {\n                                  <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                                }\n                              }\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ol>\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No sequences registered.</p>\n              }\n            </div>\n\n            @if (sequenceSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"sequenceSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of authEntries(); track entry.id) {\n              @let auth = asAuth(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'auth provider' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"auth.isAuthenticated()\"\n                    [class.et-query-devtools-chip--muted]=\"!auth.isAuthenticated()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ auth.isAuthenticated() ? 'authenticated' : 'anonymous' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>Base URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.clientBaseUrl || entry.meta.clientName || '\u2014' }}</dd>\n                  <dt>Access token</dt>\n                  <dd>{{ auth.accessToken() ? 'present' : 'none' }}</dd>\n                  <dt>Refresh token</dt>\n                  <dd>{{ auth.refreshToken() ? 'present' : 'none' }}</dd>\n                  @if (authTokenExpiry(auth); as expiry) {\n                    <dt>Token expires in</dt>\n                    <dd>{{ expiry }}</dd>\n                  }\n                  @if (auth.executionState(); as state) {\n                    <dt>Execution state</dt>\n                    <dd>{{ state.type }} \u00B7 {{ state.state }}</dd>\n                  }\n                  @if (authQueryKeys(auth).length) {\n                    <dt>Queries</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (key of authQueryKeys(auth); track key) {\n                          <span class=\"et-query-devtools-chip\">{{ key }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                  @if (authFeatures(auth).length) {\n                    <dt>Features</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of authFeatures(auth); track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ feature }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                </dl>\n\n                @if (authTokenPayload(auth); as payload) {\n                  <h4 class=\"et-query-devtools-section\">Access token payload</h4>\n                  <et-query-devtools-json [value]=\"payload\" />\n                }\n\n                @if (auth.latestNonInternalQuery(); as latest) {\n                  <h4 class=\"et-query-devtools-section\">Latest auth query \u00B7 {{ latest.key }}</h4>\n                  <et-query-devtools-json [value]=\"latest.snapshot.response()\" />\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No auth providers registered.</p>\n            }\n          </div>\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of wsEntries(); track entry.id) {\n              @let ws = asWs(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'socket' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"ws.connected()\"\n                    [class.et-query-devtools-chip--muted]=\"!ws.connected()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ ws.connected() ? 'connected' : 'disconnected' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.url }}</dd>\n                  <dt>Rooms</dt>\n                  <dd>\n                    @if (ws.rooms().length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (room of ws.rooms(); track room) {\n                          <span class=\"et-query-devtools-chip\">{{ room }}</span>\n                        }\n                      </div>\n                    } @else {\n                      none\n                    }\n                  </dd>\n                </dl>\n\n                <h5 class=\"et-query-devtools-section\">Messages ({{ ws.messages().length }})</h5>\n                @for (message of ws.messages(); track message.id) {\n                  <div class=\"et-query-devtools-ws-message\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-count\">{{ formatTime(message.timestamp) }}</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ message.room }}</span>\n                      <span class=\"et-query-devtools-method\">{{ message.event }}</span>\n                    </div>\n                    <et-query-devtools-json [value]=\"message.data\" />\n                  </div>\n                } @empty {\n                  <p class=\"et-query-devtools-empty\">No messages received yet.</p>\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No web socket clients registered.</p>\n            }\n          </div>\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (client of cacheView(); track client.name) {\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.baseUrl || client.name }}</strong>\n                  <span class=\"et-query-devtools-count\">{{ client.entries.length }} entries</span>\n                </div>\n                <table class=\"et-query-devtools-table\">\n                  <thead>\n                    <tr>\n                      <th>Request</th>\n                      <th>Consumers</th>\n                      <th>Secure</th>\n                      <th>Freshness</th>\n                      <th>Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (cacheEntry of client.entries; track cacheEntry.key) {\n                      <tr>\n                        <td [title]=\"cacheEntry.request.method + ' ' + cacheEntry.request.url\">\n                          <span class=\"et-query-devtools-method\">{{ cacheEntry.request.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ requestPath(cacheEntry.request.url) }}</span>\n                        </td>\n                        <td>{{ cacheEntry.consumerCount }}</td>\n                        <td>{{ cacheEntry.isSecure ? 'yes' : 'no' }}</td>\n                        <td>{{ cacheFreshness(cacheEntry) }}</td>\n                        <td class=\"et-query-devtools-cell-actions\">\n                          <button (click)=\"refetchCacheEntry(cacheEntry)\" class=\"et-query-devtools-btn\" type=\"button\">\n                            Refetch\n                          </button>\n                          <button\n                            (click)=\"evictCacheEntry(client.repository, cacheEntry.key)\"\n                            class=\"et-query-devtools-btn\"\n                            type=\"button\"\n                          >\n                            Evict\n                          </button>\n                        </td>\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td class=\"et-query-devtools-empty\" colspan=\"5\">Cache empty.</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No clients with a cache yet.</p>\n            }\n          </div>\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <div class=\"et-query-devtools-scroll\">\n            <div class=\"et-query-devtools-toolbar\">\n              <span class=\"et-query-devtools-count\">{{ eventLog().length }} events</span>\n              <button (click)=\"clearEvents()\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n            </div>\n            <table class=\"et-query-devtools-table\">\n              <thead>\n                <tr>\n                  <th>Time</th>\n                  <th>Base URL</th>\n                  <th>Type</th>\n                  <th>Request</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (event of eventLog(); track event.id) {\n                  <tr [attr.data-status]=\"event.type === 'request-error' ? 'error' : 'success'\">\n                    <td>{{ formatTime(event.timestamp) }}</td>\n                    <td class=\"et-query-devtools-mono\">{{ event.client }}</td>\n                    <td>\n                      {{ event.type === 'request-error' ? 'error ' + event.status : 'success' }}\n                      @if (event.isSecure) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">secure</span>\n                      }\n                    </td>\n                    <td [title]=\"event.method + ' ' + event.url\">\n                      <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                      <span class=\"et-query-devtools-url\">{{ requestPath(event.url) }}</span>\n                    </td>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td class=\"et-query-devtools-empty\" colspan=\"4\">No events captured yet.</td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Reusable inner-query list (stacks) \u2014 clicking opens the split-view drawer, not a tab switch. -->\n    <ng-template #innerQueriesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track $index) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"stackSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"stackSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">{{ link.route || link.query.id() || 'query ' + ($index + 1) }}</span>\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Reusable query detail \u2014 used by the Queries tab and the stacks split-view drawer. -->\n    <ng-template #queryDetailTpl let-sel=\"sel\">\n      <div class=\"et-query-devtools-detail-head\">\n        <span class=\"et-query-devtools-method\">{{ sel.entry.meta.method }}</span>\n        <span class=\"et-query-devtools-route\">{{ sel.entry.meta.route || '\u2014' }}</span>\n      </div>\n\n      <div class=\"et-query-devtools-actions\">\n        <span class=\"et-query-devtools-actions-label\">Run</span>\n        <button (click)=\"executeQuery(sel.query, false)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n        <button (click)=\"executeQuery(sel.query, true)\" class=\"et-query-devtools-btn\" type=\"button\">Cached</button>\n        <button (click)=\"resetQuery(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n        <button (click)=\"copyReport(sel.entry, sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ copiedReport() ? '\u2713 Copied' : 'Copy report' }}\n        </button>\n        <span class=\"et-query-devtools-actions-label\">Edit</span>\n        <button (click)=\"openResponseEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Response</button>\n        <button (click)=\"openArgsEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Replay args</button>\n        <span class=\"et-query-devtools-actions-label\">Force</span>\n        <button (click)=\"forceLoading(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Loading</button>\n        <button (click)=\"forceError(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Error</button>\n        <button (click)=\"forceEmpty(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Empty</button>\n        <button (click)=\"clearForced(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n      </div>\n\n      @if (editorMode() !== 'none') {\n        <div class=\"et-query-devtools-editor\">\n          @if (editorMode() === 'response') {\n            <h4 class=\"et-query-devtools-section\">Edit response \u2192 setResponse()</h4>\n            <textarea\n              #respArea\n              [value]=\"responseDraft()\"\n              (input)=\"responseDraft.set(respArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyResponse(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Apply</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          } @else {\n            <h4 class=\"et-query-devtools-section\">Replay with edited args \u2192 execute()</h4>\n            <textarea\n              #argsArea\n              [value]=\"argsDraft()\"\n              (input)=\"argsDraft.set(argsArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyArgs(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          }\n          @if (editError(); as err) {\n            <p class=\"et-query-devtools-editor-error\">{{ err }}</p>\n          }\n        </div>\n      }\n\n      <dl class=\"et-query-devtools-meta\">\n        <dt>Base URL</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.entry.meta.clientBaseUrl || sel.entry.meta.clientName || '\u2014' }}</dd>\n        <dt>Status</dt>\n        <dd>{{ queryStatus(sel.query) }}</dd>\n        <dt>Cache key</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.query.id() || '\u2014' }}</dd>\n        <dt>Last executed</dt>\n        <dd>{{ formatTime(sel.query.lastTimeExecutedAt()) }}</dd>\n        <dt>Triggered by</dt>\n        <dd>{{ sel.query.triggeredBy() || 'user' }}</dd>\n        @if (sel.entry.meta.featureTypes?.length) {\n          <dt>Features</dt>\n          <dd>\n            <div class=\"et-query-devtools-chips\">\n              @for (feature of sel.entry.meta.featureTypes; track feature) {\n                <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n              }\n            </div>\n          </dd>\n        }\n      </dl>\n\n      @if (sel.entry.meta.gqlQuery; as gqlQuery) {\n        <h5 class=\"et-query-devtools-section\">GraphQL document</h5>\n        <pre class=\"et-query-devtools-code\">{{ gqlDocument(gqlQuery) }}</pre>\n      }\n\n      <div class=\"et-query-devtools-section-row\">\n        <h4 class=\"et-query-devtools-section\">Value explorer</h4>\n        <input\n          #jsonSearchInput\n          [value]=\"jsonSearch()\"\n          (input)=\"jsonSearch.set(jsonSearchInput.value)\"\n          class=\"et-query-devtools-search\"\n          type=\"search\"\n          placeholder=\"filter keys / values\u2026\"\n        />\n      </div>\n\n      <h5 class=\"et-query-devtools-section\">Args</h5>\n      <et-query-devtools-json\n        [value]=\"sel.query.args()\"\n        [search]=\"jsonSearchTerm()\"\n        [expandedPaths]=\"jsonExpandedPaths()\"\n        [collapsedPaths]=\"jsonCollapsedPaths()\"\n        [toggleFn]=\"toggleJsonPath\"\n        path=\"args\"\n      />\n\n      @if (sel.query.error(); as error) {\n        <h5 class=\"et-query-devtools-section\">Error ({{ error.raw.status }})</h5>\n        <et-query-devtools-json\n          [value]=\"error.isList ? error.errors : error.error\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"error\"\n        />\n      } @else {\n        <h5 class=\"et-query-devtools-section\">Response</h5>\n        <et-query-devtools-json\n          [value]=\"sel.query.response()\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"response\"\n        />\n      }\n    </ng-template>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}.et-query-devtools-inspect-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.4rem .8rem;font:inherit}.et-query-devtools-inspect-btn:hover{color:var(--_et-qdt-fg)}.et-query-devtools-inspect-btn--active{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-master-detail{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-list{flex:0 0 34%;min-inline-size:22rem;max-inline-size:40rem;overflow-y:auto;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-detail-head,.et-query-devtools-drawer .et-query-devtools-detail-head{padding-block-end:.8rem;border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;font-size:1.1rem;font-weight:600}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-drawer{flex:0 0 42%;min-inline-size:26rem;max-inline-size:48rem;overflow-y:auto;padding:0 1rem 1rem;border-inline-start:1px solid var(--_et-qdt-border)}.et-query-devtools-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg);color:var(--_et-qdt-muted);border-block-end:1px solid var(--_et-qdt-border);margin-block-end:.8rem}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:center;gap:.8rem;inline-size:100%;text-align:start;appearance:none;border:none;border-block-end:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-fg);padding:.8rem;cursor:pointer;font:inherit}.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-row--active{background:var(--_et-qdt-active)}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-detail-head{display:flex;align-items:center;gap:.8rem;margin-block-end:.8rem}.et-query-devtools-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-block-end:.8rem}.et-query-devtools-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.3rem;background:transparent;color:var(--_et-qdt-fg);padding:.25rem .55rem;font-size:1.15rem;line-height:1.4;cursor:pointer}.et-query-devtools-btn:hover{background:var(--_et-qdt-hover)}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-code{margin:0 0 .8rem;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.15rem;max-block-size:20rem}.et-query-devtools-ws-message{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;margin-block-end:.4rem}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-card-title{display:flex;align-items:baseline;gap:.5rem;margin-block-end:.2rem}.et-query-devtools-card-sub{color:var(--_et-qdt-subtle);font-size:1.1rem;margin-block-end:.6rem;overflow-wrap:anywhere}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-list{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}.et-query-devtools-step-item{border:1px solid var(--_et-qdt-border);border-radius:.4rem;overflow:hidden}.et-query-devtools-step-item[data-status=error]{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-step-head{display:flex;align-items:stretch}.et-query-devtools-step-head .et-query-devtools-inner-row{border:none;border-radius:0;flex:1 1 auto}.et-query-devtools-step-caret-btn{appearance:none;border:none;border-inline-start:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:0 .7rem;font:inherit}.et-query-devtools-step-caret-btn:hover{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-step-io{padding:0 .8rem .8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-actions-label{color:var(--_et-qdt-subtle);align-self:center;text-transform:uppercase;font-size:1rem;letter-spacing:.05em}.et-query-devtools-actions-label:not(:first-child){margin-inline-start:.7rem}.et-query-devtools-cell-actions{display:flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:0 1 20rem;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-textarea{inline-size:100%;min-block-size:12rem;resize:vertical;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;font-family:inherit;font-size:1.2rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-json-node,.et-query-devtools-json-children{display:flex;flex-direction:column}.et-query-devtools-json-children{padding-inline-start:1.4rem;border-inline-start:1px solid var(--_et-qdt-border);margin-inline-start:.4rem}.et-query-devtools-json-row{display:flex;align-items:baseline;gap:.4rem;padding:.1rem 0;font-family:inherit;line-height:1.5}.et-query-devtools-json-toggle{appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);cursor:pointer;text-align:start;font:inherit;padding:.1rem 0}.et-query-devtools-json-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-json-caret{color:var(--_et-qdt-subtle);inline-size:1rem;flex:0 0 auto}.et-query-devtools-json-key{color:var(--_et-qdt-accent)}.et-query-devtools-json-colon,.et-query-devtools-json-preview{color:var(--_et-qdt-subtle)}.et-query-devtools-json-value{overflow-wrap:anywhere}.et-query-devtools-json-leaf[data-kind=string] .et-query-devtools-json-value{color:var(--_et-qdt-success)}.et-query-devtools-json-leaf[data-kind=number] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=boolean] .et-query-devtools-json-value{color:var(--_et-qdt-loading)}.et-query-devtools-json-leaf[data-kind=null] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=undefined] .et-query-devtools-json-value{color:var(--_et-qdt-subtle)}.et-query-devtools-json-hit{background:color-mix(in srgb,var(--_et-qdt-loading) 40%,transparent);border-radius:.2rem}.et-query-devtools-json-copy{appearance:none;border:none;background:transparent;color:var(--_et-qdt-subtle);cursor:pointer;opacity:0;font:inherit}.et-query-devtools-json-row:hover .et-query-devtools-json-copy{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QueryDevtoolsJsonComponent, selector: "et-query-devtools-json", inputs: ["value", "nodeKey", "depth", "search", "path", "expandedPaths", "collapsedPaths", "toggleFn"] }, { kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", outputs: ["openChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-query-devtools', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, QueryDevtoolsJsonComponent, QueryDevtoolsToggleComponent], host: {
+                        class: 'et-query-devtools-host',
+                    }, template: "@if (open()) {\n  <section\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [style.height.px]=\"panelHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <div\n      (pointerdown)=\"startResize($event)\"\n      class=\"et-query-devtools-resize\"\n      title=\"Drag to resize\"\n      aria-hidden=\"true\"\n    ></div>\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of tabs; track tab.id) {\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n          </button>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          \u2316 Inspect\n        </button>\n        <button (click)=\"toggleOpen()\" class=\"et-query-devtools-close\" type=\"button\" title=\"Close devtools\">\u2715</button>\n      </div>\n    </header>\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <div class=\"et-query-devtools-master-detail\">\n            <div class=\"et-query-devtools-list\">\n              <div class=\"et-query-devtools-toolbar\">\n                @if (inspectFilterIds(); as ids) {\n                  <span class=\"et-query-devtools-filter-chip\">\u2316 inspected \u00B7 {{ ids.length }}</span>\n                  <button (click)=\"clearInspectFilter()\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n                } @else {\n                  <label class=\"et-query-devtools-field\">\n                    <span>Client</span>\n                    <select\n                      #clientSelect\n                      [value]=\"selectedClientName() ?? ''\"\n                      (change)=\"selectClient(clientSelect.value || null)\"\n                      class=\"et-query-devtools-select\"\n                    >\n                      <option value=\"\">All clients</option>\n                      @for (name of clientNames(); track name) {\n                        <option [value]=\"name\">{{ name }}</option>\n                      }\n                    </select>\n                  </label>\n                }\n                <span class=\"et-query-devtools-count\">{{ filteredQueries().length }}</span>\n              </div>\n\n              @for (item of filteredQueries(); track item.entry.id) {\n                <button\n                  [class.et-query-devtools-row--active]=\"selectedQueryId() === item.entry.id\"\n                  (click)=\"selectedQueryId.set(item.entry.id)\"\n                  class=\"et-query-devtools-row\"\n                  type=\"button\"\n                >\n                  <span\n                    [attr.data-status]=\"queryStatus(item.query)\"\n                    [title]=\"queryStatus(item.query)\"\n                    class=\"et-query-devtools-status\"\n                  ></span>\n                  <span class=\"et-query-devtools-method\">{{ item.entry.meta.method }}</span>\n                  <span class=\"et-query-devtools-route\">{{ item.entry.meta.route || '\u2014' }}</span>\n                  @if (isStale(item.query)) {\n                    <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">stale</span>\n                  }\n                </button>\n              } @empty {\n                @if (inspectFilterIds()) {\n                  <p class=\"et-query-devtools-empty\">\n                    The inspected element's queries are no longer registered. Reset the filter.\n                  </p>\n                } @else {\n                  <p class=\"et-query-devtools-empty\">No queries registered.</p>\n                }\n              }\n            </div>\n\n            <div class=\"et-query-devtools-detail\">\n              @if (selectedQuery(); as sel) {\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              } @else {\n                <p class=\"et-query-devtools-empty\">Select a query to inspect it.</p>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of stackEntries(); track entry.id) {\n                @if (entry.kind === 'paged-query-stack') {\n                  @let paged = asPagedStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">paged stack</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ paged.direction() }}</span>\n                      @if (paged.loading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                    </div>\n\n                    @let pagedId = stackIdentity(paged);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ pagedId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ pagedId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ pagedId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Pages loaded</dt>\n                      <dd>{{ paged.queries().length }}</dd>\n                      <dt>Items</dt>\n                      <dd>{{ paged.items().length }}</dd>\n                      <dt>First page loaded</dt>\n                      <dd>{{ paged.isFirstPageLoaded() }}</dd>\n                      <dt>Last page loaded</dt>\n                      <dd>{{ paged.isLastPageLoaded() }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(paged) }\" />\n                  </div>\n                } @else {\n                  @let stack = asStack(entry);\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">stack</span>\n                      @if (stack.anyLoading()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">loading</span>\n                      }\n                      @if (stack.anyError()) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--error\">error</span>\n                      }\n                    </div>\n\n                    @let stackId = stackIdentity(stack);\n                    <div class=\"et-query-devtools-card-title\">\n                      <span class=\"et-query-devtools-method\">{{ stackId.method }}</span>\n                      <span class=\"et-query-devtools-route\">{{ stackId.route }}</span>\n                    </div>\n                    <div class=\"et-query-devtools-card-sub et-query-devtools-mono\">{{ stackId.baseUrl }}</div>\n                    @if (entry.meta.featureTypes?.length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of entry.meta.featureTypes; track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n                        }\n                      </div>\n                    }\n\n                    <dl class=\"et-query-devtools-meta\">\n                      <dt>Queries</dt>\n                      <dd>{{ stack.queries().length }}</dd>\n                      <dt>Loading</dt>\n                      <dd>{{ stack.loadingProgress().loaded }} / {{ stack.loadingProgress().total }}</dd>\n                      <dt>Errors</dt>\n                      <dd>{{ stack.errors().length }}</dd>\n                    </dl>\n                    <ng-container *ngTemplateOutlet=\"innerQueriesTpl; context: { links: queriesForStack(stack) }\" />\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No stacks registered.</p>\n              }\n            </div>\n\n            @if (stackSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"stackSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <div class=\"et-query-devtools-split\">\n            <div class=\"et-query-devtools-scroll\">\n              @for (entry of sequenceEntries(); track entry.id) {\n                @let sequence = asSequence(entry);\n                @if (sequence) {\n                  <div class=\"et-query-devtools-card\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-chip\">sequence</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ sequence.status() }}</span>\n                      <span class=\"et-query-devtools-count\"\n                        >step {{ sequence.currentStep() }} / {{ sequence.total }}</span\n                      >\n                    </div>\n\n                    <ol class=\"et-query-devtools-step-list\">\n                      @for (link of queriesForSequence(sequence); track $index; let i = $index) {\n                        <li [attr.data-status]=\"sequenceStepStatus(sequence, i)\" class=\"et-query-devtools-step-item\">\n                          <div class=\"et-query-devtools-step-head\">\n                            <button\n                              [class.et-query-devtools-inner-row--active]=\"sequenceSelectedQueryId() === link.id\"\n                              [disabled]=\"!link.id\"\n                              (click)=\"sequenceSelectedQueryId.set(link.id)\"\n                              class=\"et-query-devtools-inner-row\"\n                              type=\"button\"\n                            >\n                              <span\n                                [attr.data-status]=\"sequenceStepStatus(sequence, i)\"\n                                class=\"et-query-devtools-status\"\n                              ></span>\n                              <span class=\"et-query-devtools-method\">{{ i + 1 }}. {{ link.method }}</span>\n                              <span class=\"et-query-devtools-route\">{{ link.route || 'step ' + (i + 1) }}</span>\n                            </button>\n                            <button\n                              [attr.aria-expanded]=\"isStepExpanded(entry.id, i)\"\n                              (click)=\"toggleStep(entry.id, i)\"\n                              class=\"et-query-devtools-step-caret-btn\"\n                              type=\"button\"\n                              title=\"Toggle in / out\"\n                            >\n                              {{ isStepExpanded(entry.id, i) ? '\u25BE' : '\u25B8' }}\n                            </button>\n                          </div>\n\n                          @if (isStepExpanded(entry.id, i)) {\n                            @let snap = stepSnapshot(sequence, i);\n                            <div class=\"et-query-devtools-step-io\">\n                              <h5 class=\"et-query-devtools-section\">In \u00B7 args</h5>\n                              @if (sequence.stepArgs().length > i) {\n                                <et-query-devtools-json [value]=\"sequence.stepArgs()[i]\" />\n                              } @else {\n                                <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                              }\n\n                              @if (snap?.error(); as error) {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 error ({{ error.raw.status }})</h5>\n                                <et-query-devtools-json [value]=\"error.isList ? error.errors : error.error\" />\n                              } @else {\n                                <h5 class=\"et-query-devtools-section\">Out \u00B7 response</h5>\n                                @if (snap) {\n                                  <et-query-devtools-json [value]=\"snap.response()\" />\n                                } @else {\n                                  <p class=\"et-query-devtools-empty\">Not run yet.</p>\n                                }\n                              }\n                            </div>\n                          }\n                        </li>\n                      }\n                    </ol>\n                  </div>\n                }\n              } @empty {\n                <p class=\"et-query-devtools-empty\">No sequences registered.</p>\n              }\n            </div>\n\n            @if (sequenceSelectedQuery(); as sel) {\n              <aside class=\"et-query-devtools-drawer\">\n                <div class=\"et-query-devtools-drawer-head\">\n                  <span>Query detail</span>\n                  <button\n                    (click)=\"sequenceSelectedQueryId.set(null)\"\n                    class=\"et-query-devtools-close\"\n                    type=\"button\"\n                    title=\"Close detail\"\n                  >\n                    \u2715\n                  </button>\n                </div>\n                <ng-container *ngTemplateOutlet=\"queryDetailTpl; context: { sel }\" />\n              </aside>\n            }\n          </div>\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of authEntries(); track entry.id) {\n              @let auth = asAuth(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'auth provider' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"auth.isAuthenticated()\"\n                    [class.et-query-devtools-chip--muted]=\"!auth.isAuthenticated()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ auth.isAuthenticated() ? 'authenticated' : 'anonymous' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>Base URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.clientBaseUrl || entry.meta.clientName || '\u2014' }}</dd>\n                  <dt>Access token</dt>\n                  <dd>{{ auth.accessToken() ? 'present' : 'none' }}</dd>\n                  <dt>Refresh token</dt>\n                  <dd>{{ auth.refreshToken() ? 'present' : 'none' }}</dd>\n                  @if (authTokenExpiry(auth); as expiry) {\n                    <dt>Token expires in</dt>\n                    <dd>{{ expiry }}</dd>\n                  }\n                  @if (auth.executionState(); as state) {\n                    <dt>Execution state</dt>\n                    <dd>{{ state.type }} \u00B7 {{ state.state }}</dd>\n                  }\n                  @if (authQueryKeys(auth).length) {\n                    <dt>Queries</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (key of authQueryKeys(auth); track key) {\n                          <span class=\"et-query-devtools-chip\">{{ key }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                  @if (authFeatures(auth).length) {\n                    <dt>Features</dt>\n                    <dd>\n                      <div class=\"et-query-devtools-chips\">\n                        @for (feature of authFeatures(auth); track feature) {\n                          <span class=\"et-query-devtools-chip\">{{ feature }}</span>\n                        }\n                      </div>\n                    </dd>\n                  }\n                </dl>\n\n                @if (authTokenPayload(auth); as payload) {\n                  <h4 class=\"et-query-devtools-section\">Access token payload</h4>\n                  <et-query-devtools-json [value]=\"payload\" />\n                }\n\n                @if (auth.latestNonInternalQuery(); as latest) {\n                  <h4 class=\"et-query-devtools-section\">Latest auth query \u00B7 {{ latest.key }}</h4>\n                  <et-query-devtools-json [value]=\"latest.snapshot.response()\" />\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No auth providers registered.</p>\n            }\n          </div>\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (entry of wsEntries(); track entry.id) {\n              @let ws = asWs(entry);\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong>{{ entry.meta.name || 'socket' }}</strong>\n                  <span\n                    [class.et-query-devtools-chip--success]=\"ws.connected()\"\n                    [class.et-query-devtools-chip--muted]=\"!ws.connected()\"\n                    class=\"et-query-devtools-chip\"\n                  >\n                    {{ ws.connected() ? 'connected' : 'disconnected' }}\n                  </span>\n                </div>\n                <dl class=\"et-query-devtools-meta\">\n                  <dt>URL</dt>\n                  <dd class=\"et-query-devtools-mono\">{{ entry.meta.url }}</dd>\n                  <dt>Rooms</dt>\n                  <dd>\n                    @if (ws.rooms().length) {\n                      <div class=\"et-query-devtools-chips\">\n                        @for (room of ws.rooms(); track room) {\n                          <span class=\"et-query-devtools-chip\">{{ room }}</span>\n                        }\n                      </div>\n                    } @else {\n                      none\n                    }\n                  </dd>\n                </dl>\n\n                <h5 class=\"et-query-devtools-section\">Messages ({{ ws.messages().length }})</h5>\n                @for (message of ws.messages(); track message.id) {\n                  <div class=\"et-query-devtools-ws-message\">\n                    <div class=\"et-query-devtools-card-head\">\n                      <span class=\"et-query-devtools-count\">{{ formatTime(message.timestamp) }}</span>\n                      <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">{{ message.room }}</span>\n                      <span class=\"et-query-devtools-method\">{{ message.event }}</span>\n                    </div>\n                    <et-query-devtools-json [value]=\"message.data\" />\n                  </div>\n                } @empty {\n                  <p class=\"et-query-devtools-empty\">No messages received yet.</p>\n                }\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No web socket clients registered.</p>\n            }\n          </div>\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <div class=\"et-query-devtools-scroll\">\n            @for (client of cacheView(); track client.name) {\n              <div class=\"et-query-devtools-card\">\n                <div class=\"et-query-devtools-card-head\">\n                  <strong class=\"et-query-devtools-mono\">{{ client.baseUrl || client.name }}</strong>\n                  <span class=\"et-query-devtools-count\">{{ client.entries.length }} entries</span>\n                </div>\n                <table class=\"et-query-devtools-table\">\n                  <thead>\n                    <tr>\n                      <th>Request</th>\n                      <th>Consumers</th>\n                      <th>Secure</th>\n                      <th>Freshness</th>\n                      <th>Actions</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (cacheEntry of client.entries; track cacheEntry.key) {\n                      <tr>\n                        <td [title]=\"cacheEntry.request.method + ' ' + cacheEntry.request.url\">\n                          <span class=\"et-query-devtools-method\">{{ cacheEntry.request.method }}</span>\n                          <span class=\"et-query-devtools-url\">{{ requestPath(cacheEntry.request.url) }}</span>\n                        </td>\n                        <td>{{ cacheEntry.consumerCount }}</td>\n                        <td>{{ cacheEntry.isSecure ? 'yes' : 'no' }}</td>\n                        <td>{{ cacheFreshness(cacheEntry) }}</td>\n                        <td class=\"et-query-devtools-cell-actions\">\n                          <button (click)=\"refetchCacheEntry(cacheEntry)\" class=\"et-query-devtools-btn\" type=\"button\">\n                            Refetch\n                          </button>\n                          <button\n                            (click)=\"evictCacheEntry(client.repository, cacheEntry.key)\"\n                            class=\"et-query-devtools-btn\"\n                            type=\"button\"\n                          >\n                            Evict\n                          </button>\n                        </td>\n                      </tr>\n                    } @empty {\n                      <tr>\n                        <td class=\"et-query-devtools-empty\" colspan=\"5\">Cache empty.</td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            } @empty {\n              <p class=\"et-query-devtools-empty\">No clients with a cache yet.</p>\n            }\n          </div>\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <div class=\"et-query-devtools-scroll\">\n            <div class=\"et-query-devtools-toolbar\">\n              <span class=\"et-query-devtools-count\">{{ eventLog().length }} events</span>\n              <button (click)=\"clearEvents()\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n            </div>\n            <table class=\"et-query-devtools-table\">\n              <thead>\n                <tr>\n                  <th>Time</th>\n                  <th>Base URL</th>\n                  <th>Type</th>\n                  <th>Request</th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (event of eventLog(); track event.id) {\n                  <tr [attr.data-status]=\"event.type === 'request-error' ? 'error' : 'success'\">\n                    <td>{{ formatTime(event.timestamp) }}</td>\n                    <td class=\"et-query-devtools-mono\">{{ event.client }}</td>\n                    <td>\n                      {{ event.type === 'request-error' ? 'error ' + event.status : 'success' }}\n                      @if (event.isSecure) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">secure</span>\n                      }\n                    </td>\n                    <td [title]=\"event.method + ' ' + event.url\">\n                      <span class=\"et-query-devtools-method\">{{ event.method }}</span>\n                      <span class=\"et-query-devtools-url\">{{ requestPath(event.url) }}</span>\n                    </td>\n                  </tr>\n                } @empty {\n                  <tr>\n                    <td class=\"et-query-devtools-empty\" colspan=\"4\">No events captured yet.</td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Reusable inner-query list (stacks) \u2014 clicking opens the split-view drawer, not a tab switch. -->\n    <ng-template #innerQueriesTpl let-links=\"links\">\n      <div class=\"et-query-devtools-inner-queries\">\n        @for (link of links; track $index) {\n          <button\n            [class.et-query-devtools-inner-row--active]=\"stackSelectedQueryId() === link.id\"\n            [disabled]=\"!link.id\"\n            (click)=\"stackSelectedQueryId.set(link.id)\"\n            class=\"et-query-devtools-inner-row\"\n            type=\"button\"\n          >\n            <span [attr.data-status]=\"queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n            <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n            <span class=\"et-query-devtools-route\">{{ link.route || link.query.id() || 'query ' + ($index + 1) }}</span>\n          </button>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Reusable query detail \u2014 used by the Queries tab and the stacks split-view drawer. -->\n    <ng-template #queryDetailTpl let-sel=\"sel\">\n      <div class=\"et-query-devtools-detail-head\">\n        <span class=\"et-query-devtools-method\">{{ sel.entry.meta.method }}</span>\n        <span class=\"et-query-devtools-route\">{{ sel.entry.meta.route || '\u2014' }}</span>\n      </div>\n\n      <div class=\"et-query-devtools-actions\">\n        <span class=\"et-query-devtools-actions-label\">Run</span>\n        <button (click)=\"executeQuery(sel.query, false)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n        <button (click)=\"executeQuery(sel.query, true)\" class=\"et-query-devtools-btn\" type=\"button\">Cached</button>\n        <button (click)=\"resetQuery(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Reset</button>\n        <button (click)=\"copyReport(sel.entry, sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ copiedReport() ? '\u2713 Copied' : 'Copy report' }}\n        </button>\n        <span class=\"et-query-devtools-actions-label\">Edit</span>\n        <button (click)=\"openResponseEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Response</button>\n        <button (click)=\"openArgsEditor(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Replay args</button>\n        <span class=\"et-query-devtools-actions-label\">Force</span>\n        <button (click)=\"forceLoading(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Loading</button>\n        <button (click)=\"forceError(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Error</button>\n        <button (click)=\"forceEmpty(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Empty</button>\n        <button (click)=\"clearForced(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Clear</button>\n      </div>\n\n      @if (editorMode() !== 'none') {\n        <div class=\"et-query-devtools-editor\">\n          @if (editorMode() === 'response') {\n            <h4 class=\"et-query-devtools-section\">Edit response \u2192 setResponse()</h4>\n            <textarea\n              #respArea\n              [value]=\"responseDraft()\"\n              (input)=\"responseDraft.set(respArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyResponse(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Apply</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          } @else {\n            <h4 class=\"et-query-devtools-section\">Replay with edited args \u2192 execute()</h4>\n            <textarea\n              #argsArea\n              [value]=\"argsDraft()\"\n              (input)=\"argsDraft.set(argsArea.value)\"\n              class=\"et-query-devtools-textarea\"\n              spellcheck=\"false\"\n            ></textarea>\n            <div class=\"et-query-devtools-actions\">\n              <button (click)=\"applyArgs(sel.query)\" class=\"et-query-devtools-btn\" type=\"button\">Execute</button>\n              <button (click)=\"cancelEditor()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n            </div>\n          }\n          @if (editError(); as err) {\n            <p class=\"et-query-devtools-editor-error\">{{ err }}</p>\n          }\n        </div>\n      }\n\n      <dl class=\"et-query-devtools-meta\">\n        <dt>Base URL</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.entry.meta.clientBaseUrl || sel.entry.meta.clientName || '\u2014' }}</dd>\n        <dt>Status</dt>\n        <dd>{{ queryStatus(sel.query) }}</dd>\n        <dt>Cache key</dt>\n        <dd class=\"et-query-devtools-mono\">{{ sel.query.id() || '\u2014' }}</dd>\n        <dt>Last executed</dt>\n        <dd>{{ formatTime(sel.query.lastTimeExecutedAt()) }}</dd>\n        <dt>Triggered by</dt>\n        <dd>{{ sel.query.triggeredBy() || 'user' }}</dd>\n        @if (sel.entry.meta.featureTypes?.length) {\n          <dt>Features</dt>\n          <dd>\n            <div class=\"et-query-devtools-chips\">\n              @for (feature of sel.entry.meta.featureTypes; track feature) {\n                <span class=\"et-query-devtools-chip\">{{ featureLabel(feature) }}</span>\n              }\n            </div>\n          </dd>\n        }\n      </dl>\n\n      @if (sel.entry.meta.gqlQuery; as gqlQuery) {\n        <h5 class=\"et-query-devtools-section\">GraphQL document</h5>\n        <pre class=\"et-query-devtools-code\">{{ gqlDocument(gqlQuery) }}</pre>\n      }\n\n      <div class=\"et-query-devtools-section-row\">\n        <h4 class=\"et-query-devtools-section\">Value explorer</h4>\n        <input\n          #jsonSearchInput\n          [value]=\"jsonSearch()\"\n          (input)=\"jsonSearch.set(jsonSearchInput.value)\"\n          class=\"et-query-devtools-search\"\n          type=\"search\"\n          placeholder=\"filter keys / values\u2026\"\n        />\n      </div>\n\n      <h5 class=\"et-query-devtools-section\">Args</h5>\n      <et-query-devtools-json\n        [value]=\"sel.query.args()\"\n        [search]=\"jsonSearchTerm()\"\n        [expandedPaths]=\"jsonExpandedPaths()\"\n        [collapsedPaths]=\"jsonCollapsedPaths()\"\n        [toggleFn]=\"toggleJsonPath\"\n        path=\"args\"\n      />\n\n      @if (sel.query.error(); as error) {\n        <h5 class=\"et-query-devtools-section\">Error ({{ error.raw.status }})</h5>\n        <et-query-devtools-json\n          [value]=\"error.isList ? error.errors : error.error\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"error\"\n        />\n      } @else {\n        <h5 class=\"et-query-devtools-section\">Response</h5>\n        <et-query-devtools-json\n          [value]=\"sel.query.response()\"\n          [search]=\"jsonSearchTerm()\"\n          [expandedPaths]=\"jsonExpandedPaths()\"\n          [collapsedPaths]=\"jsonCollapsedPaths()\"\n          [toggleFn]=\"toggleJsonPath\"\n          path=\"response\"\n        />\n      }\n    </ng-template>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto}.et-query-devtools-inspect-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.4rem .8rem;font:inherit}.et-query-devtools-inspect-btn:hover{color:var(--_et-qdt-fg)}.et-query-devtools-inspect-btn--active{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-master-detail{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-list{flex:0 0 34%;min-inline-size:22rem;max-inline-size:40rem;overflow-y:auto;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-detail-head,.et-query-devtools-drawer .et-query-devtools-detail-head{padding-block-end:.8rem;border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;font-size:1.1rem;font-weight:600}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-drawer{flex:0 0 42%;min-inline-size:26rem;max-inline-size:48rem;overflow-y:auto;padding:0 1rem 1rem;border-inline-start:1px solid var(--_et-qdt-border)}.et-query-devtools-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg);color:var(--_et-qdt-muted);border-block-end:1px solid var(--_et-qdt-border);margin-block-end:.8rem}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:center;gap:.8rem;inline-size:100%;text-align:start;appearance:none;border:none;border-block-end:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-fg);padding:.8rem;cursor:pointer;font:inherit}.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}.et-query-devtools-row--active{background:var(--_et-qdt-active)}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-detail-head{display:flex;align-items:center;gap:.8rem;margin-block-end:.8rem}.et-query-devtools-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-block-end:.8rem}.et-query-devtools-btn{appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.3rem;background:transparent;color:var(--_et-qdt-fg);padding:.25rem .55rem;font-size:1.15rem;line-height:1.4;cursor:pointer}.et-query-devtools-btn:hover{background:var(--_et-qdt-hover)}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-code{margin:0 0 .8rem;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow:auto;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.15rem;max-block-size:20rem}.et-query-devtools-ws-message{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;margin-block-end:.4rem}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-card-title{display:flex;align-items:baseline;gap:.5rem;margin-block-end:.2rem}.et-query-devtools-card-sub{color:var(--_et-qdt-subtle);font-size:1.1rem;margin-block-end:.6rem;overflow-wrap:anywhere}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-list{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}.et-query-devtools-step-item{border:1px solid var(--_et-qdt-border);border-radius:.4rem;overflow:hidden}.et-query-devtools-step-item[data-status=error]{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-step-head{display:flex;align-items:stretch}.et-query-devtools-step-head .et-query-devtools-inner-row{border:none;border-radius:0;flex:1 1 auto}.et-query-devtools-step-caret-btn{appearance:none;border:none;border-inline-start:1px solid var(--_et-qdt-border);background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:0 .7rem;font:inherit}.et-query-devtools-step-caret-btn:hover{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-step-io{padding:0 .8rem .8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-actions-label{color:var(--_et-qdt-subtle);align-self:center;text-transform:uppercase;font-size:1rem;letter-spacing:.05em}.et-query-devtools-actions-label:not(:first-child){margin-inline-start:.7rem}.et-query-devtools-cell-actions{display:flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:0 1 20rem;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-textarea{inline-size:100%;min-block-size:12rem;resize:vertical;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.6rem;font-family:inherit;font-size:1.2rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-json-node,.et-query-devtools-json-children{display:flex;flex-direction:column}.et-query-devtools-json-children{padding-inline-start:1.4rem;border-inline-start:1px solid var(--_et-qdt-border);margin-inline-start:.4rem}.et-query-devtools-json-row{display:flex;align-items:baseline;gap:.4rem;padding:.1rem 0;font-family:inherit;line-height:1.5}.et-query-devtools-json-toggle{appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);cursor:pointer;text-align:start;font:inherit;padding:.1rem 0}.et-query-devtools-json-toggle:hover{background:var(--_et-qdt-hover)}.et-query-devtools-json-caret{color:var(--_et-qdt-subtle);inline-size:1rem;flex:0 0 auto}.et-query-devtools-json-key{color:var(--_et-qdt-accent)}.et-query-devtools-json-colon,.et-query-devtools-json-preview{color:var(--_et-qdt-subtle)}.et-query-devtools-json-value{overflow-wrap:anywhere}.et-query-devtools-json-leaf[data-kind=string] .et-query-devtools-json-value{color:var(--_et-qdt-success)}.et-query-devtools-json-leaf[data-kind=number] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=boolean] .et-query-devtools-json-value{color:var(--_et-qdt-loading)}.et-query-devtools-json-leaf[data-kind=null] .et-query-devtools-json-value,.et-query-devtools-json-leaf[data-kind=undefined] .et-query-devtools-json-value{color:var(--_et-qdt-subtle)}.et-query-devtools-json-hit{background:color-mix(in srgb,var(--_et-qdt-loading) 40%,transparent);border-radius:.2rem}.et-query-devtools-json-copy{appearance:none;border:none;background:transparent;color:var(--_et-qdt-subtle);cursor:pointer;opacity:0;font:inherit}.et-query-devtools-json-row:hover .et-query-devtools-json-copy{opacity:1}}\n"] }]
+        }], ctorParameters: () => [] });
+
+const QUERY_DEVTOOLS_IMPORTS = [QueryDevtoolsComponent];
+
 // codes 2100-2199
 const SCROLLABLE_ERROR_CODES = {
     MISSING_SCROLL_CONTAINER: 2100,
@@ -36704,5 +37742,5 @@ const TOOLTIP_IMPORTS = [TooltipDirective, TooltipComponent];
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BOLD_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_IMPORTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DEFAULT_BREAKPOINTS, DEFAULT_ICON_VARIANT, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_STREAM_PLAYER_STATE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DescriptionComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, FACEBOOK_PLAYER_TOKEN, FILE_ICON, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_IMPORTS, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, QueryParamOverlayLinkDirective, RATING_IMPORTS, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STAR_ICON, STREAM_CONSENT_TOKEN, STREAM_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_ICON, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, compactLayout, computeGeometry, computeGridHeight, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createGridAdapter, createIbanMask, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createV2DropzoneUpload, defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, dialogOverlayStrategy, disposeDropzoneEntry, dropzoneFiles, enableDragToDismiss, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, getClosestOverlay, getOriginCoordinatesAndDimensions, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectDateFormat, injectDateLocale, injectDialogStrategy, injectDialogStrategyDefaults, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSidebarOverlay, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTimeFormat, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, leftSheetOverlayStrategy, mapLayoutToBreakpoint, matchCountryByDialCode, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, nodesEqual, parseDuration, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideDateFormat, provideDateLocale, provideDialogStrategy, provideDialogStrategyDefaults, provideFormErrorMessageResolver, provideFormSupport, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideIconOverrides, provideIcons, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideRichTextEditorAlignmentTool, provideRichTextEditorLanguageTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTimeFormat, provideTopSheetStrategy, provideTopSheetStrategyDefaults, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, rightSheetOverlayStrategy, rowsToPixelHeight, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, snapResizeSpan, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, stripTrunkZero, supportPresentationIncludesState, toChildrenObservable, toGridPosition, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, wireFormSupport };
+export { ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BOLD_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_IMPORTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DEFAULT_BREAKPOINTS, DEFAULT_ICON_VARIANT, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_STREAM_PLAYER_STATE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DescriptionComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, FACEBOOK_PLAYER_TOKEN, FILE_ICON, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_IMPORTS, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, QUERY_DEVTOOLS_IMPORTS, QueryDevtoolsComponent, QueryDevtoolsJsonComponent, QueryDevtoolsToggleComponent, QueryParamOverlayLinkDirective, RATING_IMPORTS, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STAR_ICON, STREAM_CONSENT_TOKEN, STREAM_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_ICON, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, compactLayout, computeGeometry, computeGridHeight, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createGridAdapter, createIbanMask, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createV2DropzoneUpload, defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, dialogOverlayStrategy, disposeDropzoneEntry, dropzoneFiles, enableDragToDismiss, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, getClosestOverlay, getOriginCoordinatesAndDimensions, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectDateFormat, injectDateLocale, injectDialogStrategy, injectDialogStrategyDefaults, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSidebarOverlay, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTimeFormat, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, leftSheetOverlayStrategy, mapLayoutToBreakpoint, matchCountryByDialCode, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, nodesEqual, parseDuration, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideDateFormat, provideDateLocale, provideDialogStrategy, provideDialogStrategyDefaults, provideFormErrorMessageResolver, provideFormSupport, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideIconOverrides, provideIcons, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideRichTextEditorAlignmentTool, provideRichTextEditorLanguageTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTimeFormat, provideTopSheetStrategy, provideTopSheetStrategyDefaults, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, rightSheetOverlayStrategy, rowsToPixelHeight, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, snapResizeSpan, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, stripTrunkZero, supportPresentationIncludesState, toChildrenObservable, toGridPosition, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, wireFormSupport };
 //# sourceMappingURL=ethlete-components.mjs.map