@ethlete/components 1.0.0-next.62 → 1.0.0-next.63

package/fesm2022/ethlete-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Injector, output, runInInjectionContext, contentChild, NgZone, afterRenderEffect, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, isSignal, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, PLATFORM_ID, CSP_NONCE } from '@angular/core';
+import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Renderer2, Injector, output, runInInjectionContext, contentChild, NgZone, afterRenderEffect, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, isSignal, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, PLATFORM_ID, CSP_NONCE } from '@angular/core';
 import * as i1 from '@ethlete/core';
 import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, isElement, injectBreakpointObserver, isHTMLElement, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, markdownToHtml, injectHasTouchInput, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, signalElementMutations, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
 import { NgTemplateOutlet, NgComponentOutlet, Location, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
@@ -11,7 +11,7 @@ import { Subject, take, tap, defer, map, finalize, timer, takeUntil, fromEvent,
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/router';
 import { Router, RouterLink, ActivatedRoute, RouterLinkActive, NavigationEnd } from '@angular/router';
-import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, executeUntilSettled, extractQuery, queryComputed, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, createQueryErrorResponse } from '@ethlete/query';
+import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, executeUntilSettled$, extractQuery, queryComputed, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, createQueryErrorResponse } from '@ethlete/query';
 import { createMetadataKey, metadata, FORM_FIELD, validate, createManagedMetadataKey, submit, form } from '@angular/forms/signals';
 import { TZDate } from '@date-fns/tz';
 import { enUS } from 'date-fns/locale/en-US';
@@ -2451,9 +2451,12 @@ class ButtonDirective {
         ...(ngDevMode ? [{ debugName: "isInactive" }] : /* istanbul ignore next */ []));
         this.hasProgress = computed(() => this.progress() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasProgress" }] : /* istanbul ignore next */ []));
+        // Must stay a capture listener: at the target, capture listeners run before every bubble
+        // listener, so this beats a consumer's template `(click)` on the same element. As a bubble
+        // listener it runs after them, and a loading button or disabled link fires the consumer's handler.
+        const unlisten = inject(Renderer2).listen(this.elementRef.nativeElement, 'click', (event) => this.blockInactiveClick(event), { capture: true });
+        inject(DestroyRef).onDestroy(unlisten);
     }
-    // A loading button sets no native `disabled`, so it keeps DOM focus and its place in the tab
-    // order. Nothing else stops the click a keyboard activation dispatches.
     blockInactiveClick(event) {
         if (!this.isInactive()) {
             return;
@@ -2462,7 +2465,7 @@ class ButtonDirective {
         event.stopImmediatePropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "blockInactiveClick($event)" }, properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && disabled() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "ariaPressed()", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && disabled() ? -1 : ownTabIndex" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i1.SurfaceInteractiveDirective }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && disabled() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "ariaPressed()", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && disabled() ? -1 : ownTabIndex" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i1.SurfaceInteractiveDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
@@ -2479,10 +2482,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.aria-pressed]': 'ariaPressed()',
                         '[attr.type]': 'IS_BUTTON ? type() : null',
                         '[attr.tabindex]': 'IS_ANCHOR && disabled() ? -1 : ownTabIndex',
-                        '(click)': 'blockInactiveClick($event)',
                     },
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
 
 const INHERIT_COLOR = 'inherit';
 class ButtonColorDirective {
@@ -3859,8 +3861,8 @@ const PICTURE_IMPORTS = [PictureComponent, PicturePlaceholderDirective, PictureE
  *
  * @example
  * <et-skeleton-item shape="text" />
- * <et-skeleton-item shape="circle" style="--et-skeleton-size: 40px" />
- * <et-skeleton-item style="block-size: 120px; border-radius: 12px" />
+ * <et-skeleton-item shape="circle" [style.--et-skeleton-size.px]="40" />
+ * <et-skeleton-item [style.block-size.px]="120" [style.border-radius.px]="12" />
  */
 class SkeletonItemComponent {
     constructor() {
@@ -3930,7 +3932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  *
  * @example
  * <et-skeleton>
- *   <et-skeleton-item shape="circle" style="--et-skeleton-size: 40px" />
+ *   <et-skeleton-item shape="circle" [style.--et-skeleton-size.px]="40" />
  *   <et-skeleton-text lines="3" />
  * </et-skeleton>
  */
@@ -6818,14 +6820,14 @@ class OverlayContainerComponent {
         return host;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, componentDirectives: { classPropertyName: "componentDirectives", publicName: "componentDirectives", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null }, renderDragHandle: { classPropertyName: "renderDragHandle", publicName: "renderDragHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "@if (renderDragHandle()) {\n  <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--et-overlay-radius: 1.6rem;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){overflow:auto;border-radius:inherit}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main){display:grid}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--et-overlay-radius: 1.2rem}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--et-overlay-radius);border-start-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--et-overlay-radius);border-end-start-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, componentDirectives: { classPropertyName: "componentDirectives", publicName: "componentDirectives", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null }, renderDragHandle: { classPropertyName: "renderDragHandle", publicName: "renderDragHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "@if (renderDragHandle()) {\n  <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--_et-overlay-radius: var(--et-overlay-radius, 1.6rem);position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){overflow:auto;border-radius:inherit}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main){display:grid}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--_et-overlay-radius: var(--et-overlay-radius, 1.2rem)}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--_et-overlay-radius);border-start-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--_et-overlay-radius);border-end-start-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OverlayContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-overlay-container', encapsulation: ViewEncapsulation.None, providers: [provideBoundaryElement()], hostDirectives: [AnimatedLifecycleDirective, ProvideColorDirective, ProvideSurfaceDirective], host: {
                         class: 'et-overlay',
                         '[class.et-with-default-animation]': '!overlayRef.config.customAnimated',
-                    }, template: "@if (renderDragHandle()) {\n  <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--et-overlay-radius: 1.6rem;position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){overflow:auto;border-radius:inherit}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main){display:grid}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--et-overlay-radius: 1.2rem}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--et-overlay-radius);border-start-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--et-overlay-radius);border-end-end-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--et-overlay-radius);border-end-start-radius:var(--et-overlay-radius)}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"] }]
+                    }, template: "@if (renderDragHandle()) {\n  <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n  <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--_et-overlay-radius: var(--et-overlay-radius, 1.6rem);position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){overflow:auto;border-radius:inherit}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main){display:grid}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--_et-overlay-radius: var(--et-overlay-radius, 1.2rem)}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--_et-overlay-radius);border-start-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--_et-overlay-radius);border-end-start-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], componentBindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentBindings", required: false }] }], componentDirectives: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentDirectives", required: false }] }], renderArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderArrow", required: false }] }], renderDragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderDragHandle", required: false }] }], contentOutlet: [{ type: i0.ViewChild, args: ['contentOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 /**
@@ -10386,6 +10388,23 @@ const OVERLAY_SCROLL_BLOCKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
     ...(ngDevMode ? [{ debugName: "hasBlockingOverlay" }] : /* istanbul ignore next */ []));
     const root = document.documentElement;
     let savedTop = null;
+    const unlock = () => {
+        if (savedTop === null)
+            return;
+        const top = savedTop;
+        savedTop = null;
+        renderer.setStyle(root, {
+            position: null,
+            top: null,
+            left: null,
+            right: null,
+            overflowY: null,
+            scrollBehavior: 'auto',
+        });
+        document.defaultView?.scrollTo(0, top);
+        renderer.setStyle(root, { scrollBehavior: null });
+    };
+    inject(DestroyRef).onDestroy(unlock);
     combineLatest([toObservable(hasBlockingOverlay), toObservable(documentScrollState)])
         .pipe(tap(([hasOpenOverlays, scrollState]) => {
         if (hasOpenOverlays && scrollState.canScrollVertically && savedTop === null) {
@@ -10398,19 +10417,8 @@ const OVERLAY_SCROLL_BLOCKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
                 overflowY: 'scroll',
             });
         }
-        else if (!hasOpenOverlays && savedTop !== null) {
-            const top = savedTop;
-            savedTop = null;
-            renderer.setStyle(root, {
-                position: null,
-                top: null,
-                left: null,
-                right: null,
-                overflowY: null,
-                scrollBehavior: 'auto',
-            });
-            document.defaultView?.scrollTo(0, top);
-            renderer.setStyle(root, { scrollBehavior: null });
+        else if (!hasOpenOverlays) {
+            unlock();
         }
     }), takeUntilDestroyed())
         .subscribe();
@@ -21722,11 +21730,11 @@ const FORM_FIELD_LABELS = /* @__PURE__ */ toToken(FORM_FIELD_LABELS_DEF);
  */
 class FormFieldTextShellStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldTextShellStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormFieldTextShellStylesComponent, isStandalone: true, selector: "et-form-field-text-shell-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md],:not([data-size])){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field[data-text-shell][data-label-mode=static][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-control-area{position:static}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field[data-text-shell][data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) .et-select-value[data-placeholder]{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{color:transparent}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) .et-select-value[data-placeholder]{color:transparent}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-outside][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field[data-text-shell][data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field[data-text-shell] .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-label-area,et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field[data-text-shell][data-readonly] .et-form-field-shell,et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame,et-form-field[data-text-shell][data-readonly] .et-form-field-label-area,et-form-field[data-text-shell][data-readonly] .et-form-field-control,et-form-field[data-text-shell][data-readonly] input,et-form-field[data-text-shell][data-readonly] textarea,et-form-field[data-text-shell][data-readonly] [contenteditable]{cursor:default}et-form-field[data-text-shell][data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field[data-text-shell][data-disabled] .et-form-field-shell{cursor:not-allowed}et-form-field[data-text-shell][data-disabled] .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field[data-text-shell][data-disabled] .et-form-field-label-area{cursor:not-allowed}et-form-field[data-text-shell][data-appearance=underline]{--et-form-field-control-min-height: calc( var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) + var(--et-form-field-control-padding-block) * 2 )}et-form-field[data-text-shell][data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormFieldTextShellStylesComponent, isStandalone: true, selector: "et-form-field-text-shell-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--_et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md],:not([data-size])){--et-form-field-gap: 5px;--_et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--_et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field[data-text-shell][data-label-mode=static][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-control-area{position:static}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field[data-text-shell][data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) .et-select-value[data-placeholder]{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{color:transparent}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) .et-select-value[data-placeholder]{color:transparent}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-outside][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field[data-text-shell][data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field[data-text-shell] .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-label-area,et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field[data-text-shell][data-readonly] .et-form-field-shell,et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame,et-form-field[data-text-shell][data-readonly] .et-form-field-label-area,et-form-field[data-text-shell][data-readonly] .et-form-field-control,et-form-field[data-text-shell][data-readonly] input,et-form-field[data-text-shell][data-readonly] textarea,et-form-field[data-text-shell][data-readonly] [contenteditable]{cursor:default}et-form-field[data-text-shell][data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field[data-text-shell][data-disabled] .et-form-field-shell{cursor:not-allowed}et-form-field[data-text-shell][data-disabled] .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field[data-text-shell][data-disabled] .et-form-field-label-area{cursor:not-allowed}et-form-field[data-text-shell][data-appearance=underline]{--et-form-field-control-min-height: calc( var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) + var(--et-form-field-control-padding-block) * 2 )}et-form-field[data-text-shell][data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldTextShellStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-form-field-text-shell-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md],:not([data-size])){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field[data-text-shell][data-label-mode=static][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-control-area{position:static}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field[data-text-shell][data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) .et-select-value[data-placeholder]{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{color:transparent}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) .et-select-value[data-placeholder]{color:transparent}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-outside][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field[data-text-shell][data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field[data-text-shell] .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-label-area,et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field[data-text-shell][data-readonly] .et-form-field-shell,et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame,et-form-field[data-text-shell][data-readonly] .et-form-field-label-area,et-form-field[data-text-shell][data-readonly] .et-form-field-control,et-form-field[data-text-shell][data-readonly] input,et-form-field[data-text-shell][data-readonly] textarea,et-form-field[data-text-shell][data-readonly] [contenteditable]{cursor:default}et-form-field[data-text-shell][data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field[data-text-shell][data-disabled] .et-form-field-shell{cursor:not-allowed}et-form-field[data-text-shell][data-disabled] .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field[data-text-shell][data-disabled] .et-form-field-label-area{cursor:not-allowed}et-form-field[data-text-shell][data-appearance=underline]{--et-form-field-control-min-height: calc( var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) + var(--et-form-field-control-padding-block) * 2 )}et-form-field[data-text-shell][data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}}\n"] }]
+            args: [{ selector: 'et-form-field-text-shell-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--_et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md],:not([data-size])){--et-form-field-gap: 5px;--_et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--_et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field[data-text-shell][data-label-mode=static][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-control-area{position:static}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field[data-text-shell][data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) .et-select-value[data-placeholder]{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{color:transparent}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) .et-select-value[data-placeholder]{color:transparent}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-outside][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field[data-text-shell][data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field[data-text-shell] .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-label-area,et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field[data-text-shell][data-readonly] .et-form-field-shell,et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame,et-form-field[data-text-shell][data-readonly] .et-form-field-label-area,et-form-field[data-text-shell][data-readonly] .et-form-field-control,et-form-field[data-text-shell][data-readonly] input,et-form-field[data-text-shell][data-readonly] textarea,et-form-field[data-text-shell][data-readonly] [contenteditable]{cursor:default}et-form-field[data-text-shell][data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field[data-text-shell][data-disabled] .et-form-field-shell{cursor:not-allowed}et-form-field[data-text-shell][data-disabled] .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field[data-text-shell][data-disabled] .et-form-field-label-area{cursor:not-allowed}et-form-field[data-text-shell][data-appearance=underline]{--et-form-field-control-min-height: calc( var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) + var(--et-form-field-control-padding-block) * 2 )}et-form-field[data-text-shell][data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}}\n"] }]
         }] });
 /**
  * Mounts the text-field shell stylesheet. Call from the constructor of every control that renders
@@ -25026,7 +25034,7 @@ class FormFieldComponent {
         this.formFieldDir.activate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n       the field they belong to. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n       the field they belong to. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -25066,7 +25074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-size]': 'formFieldDir.usesTextFieldShell() ? size() : null',
                         '[attr.data-text-shell]': 'formFieldDir.usesTextFieldShell() || null',
                         '[style.--_et-form-field-prefix-offset]': 'prefixOffset()',
-                    }, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n       the field they belong to. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"] }]
+                    }, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n       the field they belong to. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n  <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.errorColorTheme\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContent: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], counterContent: [{ type: i0.ViewChild, args: ['counterContent', { isSignal: true }] }], controlFrame: [{ type: i0.ViewChild, args: ['controlFrame', { isSignal: true }] }], prefixEl: [{ type: i0.ViewChild, args: ['prefixEl', { isSignal: true }] }], errorAnimatable: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], warningAnimatable: [{ type: i0.ViewChild, args: ['warningAnimatable', { isSignal: true }] }], hintAnimatable: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
 
 const INPUT_MASK_HOST = new InjectionToken('INPUT_MASK_HOST');
@@ -33096,9 +33104,7 @@ const createNewQueryDeleteExecutor = (config) => {
         const { value, injector } = options;
         const query = queryCreator({ injector, silenceMissingWithArgsFeatureError: true });
         const args = createArgs(value);
-        return executeUntilSettled(query, { args })
-            .then((snapshot) => snapshot.error())
-            .finally(() => query.subtle.destroy());
+        return firstValueFrom(executeUntilSettled$(query, { args }).pipe(map((snapshot) => snapshot.error()), finalize(() => query.subtle.destroy())));
     };
 };
 const createV2QueryDeleteExecutor = (config) => {
@@ -35513,6 +35519,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }] });
 
 const EMPTY_INLINE_SWEEP_SELECTOR = /* @__PURE__ */ [...INLINE_TAGS, 'a'].join(', ');
+const INERT_STYLE_ATTRIBUTE = 'data-et-paste-style';
+const HTML_START_TAG = /<[a-z][^\s/>]*(?:\s+[^\s/>=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)*\s*\/?>/gi;
+const HTML_ATTRIBUTE = /(\s+)([^\s/>=]+)((?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)/g;
+const renameStyleAttribute = (attribute, ...[space, name, value]) => name?.toLowerCase() === 'style' ? `${space}${INERT_STYLE_ATTRIBUTE}${value}` : attribute;
+const renameStyleAttributes = (html) => html.replace(HTML_START_TAG, (tag) => tag.replace(HTML_ATTRIBUTE, renameStyleAttribute));
+const restoreStyleAttributes = (html) => html.replaceAll(` ${INERT_STYLE_ATTRIBUTE}="`, ' style="');
 /** Every call must sit inside an `ngDevMode` branch - that is what keeps these strings out of a production bundle. */
 const missingDomFeature = (method, provider) => new RuntimeError(RICH_TEXT_EDITOR_ERROR_CODES.DOM_FEATURE_NOT_PROVIDED, `${method} requires ${provider}(). Add it to a component or route's providers so this editor has the DOM operations it drives.`);
 class RichTextEditorDirective extends AccessibleNameControlDirective {
@@ -35929,14 +35941,14 @@ class RichTextEditorDirective extends AccessibleNameControlDirective {
         if (this.disabled() || this.readonly() || !this.editorDom.root())
             return false;
         this.clearPendingMarks();
-        // DOMParser yields an inert document: clipboard scripts never run and images never load
-        // while the foreign markup is being reduced.
-        const body = new DOMParser().parseFromString(html, 'text/html').body;
+        // Chromium checks style-src-attr for every parsed style attribute, even in a DOMParser,
+        // createHTMLDocument or <template> document, so the attribute is renamed before parsing.
+        const body = new DOMParser().parseFromString(renameStyleAttributes(html), 'text/html').body;
         // eslint-disable-next-line ethlete/no-dom-query -- clipboard HTML (e.g. from Word) embeds <style> blocks whose CSS text would survive the tag-strip as plain text
         body.querySelectorAll('style, script, noscript, meta, link, title').forEach((junk) => junk.remove());
         const codec = this.tokenCodec();
         codec?.serialize(body);
-        const markdown = this.parseTokenText(htmlToMarkdown(body.innerHTML));
+        const markdown = this.parseTokenText(htmlToMarkdown(restoreStyleAttributes(body.innerHTML)));
         if (!markdown)
             return false;
         const normalized = markdownToHtml(markdown);
@@ -53070,6 +53082,8 @@ class PaginationComponent {
         this.jumpInputId = createComponentId('et-pagination-jump-input');
         // Re-fit the page window whenever the paginator's own width changes (viewport resize, footer layout).
         this.hostDimensions = signalHostElementDimensions();
+        this.fitsWidth = computed(() => this.responsive() && this.compact() !== true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fitsWidth" }] : /* istanbul ignore next */ []));
         /** The `[start, end]` (1-based, inclusive) item range shown on the current page, or `null` if unknown. */
         this.range = computed(() => {
             const size = this.pageSize();
@@ -53250,7 +53264,7 @@ class PaginationComponent {
         return attempts;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PaginationComponent, isStandalone: true, selector: "et-pagination", inputs: { renderAs: { classPropertyName: "renderAs", publicName: "renderAs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, urlForPage: { classPropertyName: "urlForPage", publicName: "urlForPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showJumpTo: { classPropertyName: "showJumpTo", publicName: "showJumpTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-compact": "isCompact() ? \"\" : null" }, classAttribute: "et-pagination-host" }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["paginationList"], descendants: true, isSignal: true }, { propertyName: "itemEls", predicate: ["paginationItem"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PaginationDirective, inputs: ["page", "page", "totalPages", "totalPages", "siblingCount", "siblingCount", "boundaryCount", "boundaryCount", "hideFirstLast", "hideFirstLast", "hidePreviousNext", "hidePreviousNext", "ariaLabel", "ariaLabel", "labels", "labels"], outputs: ["pageChange", "pageChange"] }], ngImport: i0, template: "@if (!isCompact() && rangeStatus(); as status) {\n  <p class=\"et-pagination-range\" aria-live=\"polite\">\n    <!-- Invisible width floor; see widestRangeStatus. Stacked with the live text in one grid cell. -->\n    <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestRangeStatus() }}</span>\n    <span class=\"et-pagination-readout-text\">{{ status }}</span>\n  </p>\n}\n\n<ul #paginationList class=\"et-pagination-list\">\n  @if (isCompact()) {\n    <!-- Compact pager: the readout, then previous/next \u2014 readout first so a changing digit count grows\n         leftward and the chevrons hold their place across page changes. -->\n    <li class=\"et-pagination-status\" aria-live=\"polite\">\n      <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestCompactStatus() }}</span>\n      <span class=\"et-pagination-readout-text\">{{ compactStatus() }}</span>\n    </li>\n    @if (compactControls().previous; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n    @if (compactControls().next; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n  } @else {\n    @for (item of items(); track $index) {\n      <li #paginationItem [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        @if (item.type === 'ellipsis') {\n          <span class=\"et-pagination-ellipsis\" aria-hidden=\"true\">\u2026</span>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n        }\n      </li>\n    }\n  }\n</ul>\n\n<ng-template #control let-item>\n  @if (hrefFor(item); as href) {\n    <a\n      [attr.href]=\"href\"\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"selectLink($event, item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </a>\n  } @else {\n    <button\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [disabled]=\"item.disabled\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"select(item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </button>\n  }\n</ng-template>\n\n@if (showJumpTo()) {\n  <div class=\"et-pagination-jump\">\n    <label [attr.for]=\"jumpInputId\" class=\"et-pagination-jump-label\">\n      {{ pagination.resolvedLabels().jumpTo }}\n    </label>\n    <input\n      #jumpInput\n      [min]=\"1\"\n      [max]=\"pagination.totalPages()\"\n      [id]=\"jumpInputId\"\n      (keydown.enter)=\"jump(jumpInput.value); jumpInput.value = ''\"\n      class=\"et-pagination-jump-input\"\n      inputmode=\"numeric\"\n      type=\"number\"\n    />\n  </div>\n}\n\n<ng-template #inner let-item>\n  @switch (item.type) {\n    @case ('first') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M11 3 6 8l5 5M5 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('previous') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M10 3 5 8l5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('next') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M6 3l5 5-5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('last') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M5 3l5 5-5 5M11 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @default {\n      {{ item.page }}\n    }\n  }\n</ng-template>\n", styles: ["@layer components{@property --et-pagination-item-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pagination-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-pagination-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}:where(.et-pagination-host){display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap)}@media(pointer:coarse){:where(.et-pagination-host){--et-pagination-item-size: 44px}.et-pagination-host{isolation:isolate}.et-pagination-host .et-pagination-button:before{content:\"\";position:absolute;z-index:-1;top:50%;left:50%;inline-size:max(100%,44px);block-size:max(100%,44px);translate:-50% -50%}}.et-pagination-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap);margin:0;padding:0;list-style:none}.et-pagination-item{display:flex}.et-pagination-host .et-pagination-button{--et-button-padding: 0;--et-button-border-radius: var(--et-pagination-radius);padding-inline:4px;min-inline-size:var(--et-pagination-item-size);min-block-size:var(--et-pagination-item-size);font-variant-numeric:tabular-nums}.et-pagination-host .et-pagination-button--control{padding-inline:0;inline-size:var(--et-pagination-item-size)}.et-pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--et-pagination-item-size);block-size:var(--et-pagination-item-size);color:var(--et-surface-color-muted-solid, CanvasText);-webkit-user-select:none;user-select:none}.et-pagination-range{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-range,.et-pagination-status{display:inline-grid;grid-template-columns:auto;justify-items:center}.et-pagination-readout-sizer,.et-pagination-readout-text{grid-area:1 / 1;white-space:nowrap}.et-pagination-readout-sizer{visibility:hidden}.et-pagination-jump{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-jump-input{inline-size:64px;min-block-size:var(--et-pagination-item-size);padding-inline:8px;font:inherit;font-variant-numeric:tabular-nums;color:var(--et-surface-color-solid, CanvasText);background:transparent;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));border-radius:var(--et-pagination-radius)}.et-pagination-jump-input:where(:focus-visible){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-pagination-host:where([data-size=sm]){--et-pagination-item-size: 28px;--et-pagination-gap: 4px}.et-pagination-host:where([data-size=sm]) .et-pagination-button{--et-button-padding: 2px 0;font-size:13px}.et-pagination-host:where([data-compact]){--et-pagination-item-size: 34px;--et-pagination-gap: 2px}.et-pagination-status{align-items:center;min-block-size:var(--et-pagination-item-size);padding-inline:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--et-surface-color-muted-solid, CanvasText)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PaginationComponent, isStandalone: true, selector: "et-pagination", inputs: { renderAs: { classPropertyName: "renderAs", publicName: "renderAs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, urlForPage: { classPropertyName: "urlForPage", publicName: "urlForPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showJumpTo: { classPropertyName: "showJumpTo", publicName: "showJumpTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-compact": "isCompact() ? \"\" : null", "attr.data-fit-width": "fitsWidth() ? \"\" : null" }, classAttribute: "et-pagination-host" }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["paginationList"], descendants: true, isSignal: true }, { propertyName: "itemEls", predicate: ["paginationItem"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PaginationDirective, inputs: ["page", "page", "totalPages", "totalPages", "siblingCount", "siblingCount", "boundaryCount", "boundaryCount", "hideFirstLast", "hideFirstLast", "hidePreviousNext", "hidePreviousNext", "ariaLabel", "ariaLabel", "labels", "labels"], outputs: ["pageChange", "pageChange"] }], ngImport: i0, template: "@if (!isCompact() && rangeStatus(); as status) {\n  <p class=\"et-pagination-range\" aria-live=\"polite\">\n    <!-- Invisible width floor; see widestRangeStatus. Stacked with the live text in one grid cell. -->\n    <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestRangeStatus() }}</span>\n    <span class=\"et-pagination-readout-text\">{{ status }}</span>\n  </p>\n}\n\n<ul #paginationList class=\"et-pagination-list\">\n  @if (isCompact()) {\n    <!-- Compact pager: the readout, then previous/next \u2014 readout first so a changing digit count grows\n         leftward and the chevrons hold their place across page changes. -->\n    <li class=\"et-pagination-status\" aria-live=\"polite\">\n      <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestCompactStatus() }}</span>\n      <span class=\"et-pagination-readout-text\">{{ compactStatus() }}</span>\n    </li>\n    @if (compactControls().previous; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n    @if (compactControls().next; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n  } @else {\n    @for (item of items(); track $index) {\n      <li #paginationItem [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        @if (item.type === 'ellipsis') {\n          <span class=\"et-pagination-ellipsis\" aria-hidden=\"true\">\u2026</span>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n        }\n      </li>\n    }\n  }\n</ul>\n\n<ng-template #control let-item>\n  @if (hrefFor(item); as href) {\n    <a\n      [attr.href]=\"href\"\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"selectLink($event, item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </a>\n  } @else {\n    <button\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [disabled]=\"item.disabled\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"select(item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </button>\n  }\n</ng-template>\n\n@if (showJumpTo()) {\n  <div class=\"et-pagination-jump\">\n    <label [attr.for]=\"jumpInputId\" class=\"et-pagination-jump-label\">\n      {{ pagination.resolvedLabels().jumpTo }}\n    </label>\n    <input\n      #jumpInput\n      [min]=\"1\"\n      [max]=\"pagination.totalPages()\"\n      [id]=\"jumpInputId\"\n      (keydown.enter)=\"jump(jumpInput.value); jumpInput.value = ''\"\n      class=\"et-pagination-jump-input\"\n      inputmode=\"numeric\"\n      type=\"number\"\n    />\n  </div>\n}\n\n<ng-template #inner let-item>\n  @switch (item.type) {\n    @case ('first') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M11 3 6 8l5 5M5 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('previous') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M10 3 5 8l5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('next') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M6 3l5 5-5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('last') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M5 3l5 5-5 5M11 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @default {\n      {{ item.page }}\n    }\n  }\n</ng-template>\n", styles: ["@layer components{@property --et-pagination-item-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pagination-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-pagination-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}:where(.et-pagination-host){display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap)}:where(.et-pagination-host[data-fit-width]){flex-grow:1}@media(pointer:coarse){:where(.et-pagination-host){--et-pagination-item-size: 44px}.et-pagination-host{isolation:isolate}.et-pagination-host .et-pagination-button:before{content:\"\";position:absolute;z-index:-1;top:50%;left:50%;inline-size:max(100%,44px);block-size:max(100%,44px);translate:-50% -50%}}.et-pagination-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap);margin:0;padding:0;list-style:none}.et-pagination-item{display:flex}.et-pagination-host .et-pagination-button{--et-button-padding: 0;--et-button-border-radius: var(--et-pagination-radius);padding-inline:4px;min-inline-size:var(--et-pagination-item-size);min-block-size:var(--et-pagination-item-size);font-variant-numeric:tabular-nums}.et-pagination-host .et-pagination-button--control{padding-inline:0;inline-size:var(--et-pagination-item-size)}.et-pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--et-pagination-item-size);block-size:var(--et-pagination-item-size);color:var(--et-surface-color-muted-solid, CanvasText);-webkit-user-select:none;user-select:none}.et-pagination-range{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-range,.et-pagination-status{display:inline-grid;grid-template-columns:auto;justify-items:center}.et-pagination-readout-sizer,.et-pagination-readout-text{grid-area:1 / 1;white-space:nowrap}.et-pagination-readout-sizer{visibility:hidden}.et-pagination-jump{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-jump-input{inline-size:64px;min-block-size:var(--et-pagination-item-size);padding-inline:8px;font:inherit;font-variant-numeric:tabular-nums;color:var(--et-surface-color-solid, CanvasText);background:transparent;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));border-radius:var(--et-pagination-radius)}.et-pagination-jump-input:where(:focus-visible){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-pagination-host:where([data-size=sm]){--et-pagination-item-size: 28px;--et-pagination-gap: 4px}.et-pagination-host:where([data-size=sm]) .et-pagination-button{--et-button-padding: 2px 0;font-size:13px}.et-pagination-host:where([data-compact]){--et-pagination-item-size: 34px;--et-pagination-gap: 2px}.et-pagination-status{align-items:center;min-block-size:var(--et-pagination-item-size);padding-inline:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--et-surface-color-muted-solid, CanvasText)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -53273,7 +53287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'et-pagination-host',
                         '[attr.data-size]': 'size()',
                         '[attr.data-compact]': 'isCompact() ? "" : null',
-                    }, template: "@if (!isCompact() && rangeStatus(); as status) {\n  <p class=\"et-pagination-range\" aria-live=\"polite\">\n    <!-- Invisible width floor; see widestRangeStatus. Stacked with the live text in one grid cell. -->\n    <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestRangeStatus() }}</span>\n    <span class=\"et-pagination-readout-text\">{{ status }}</span>\n  </p>\n}\n\n<ul #paginationList class=\"et-pagination-list\">\n  @if (isCompact()) {\n    <!-- Compact pager: the readout, then previous/next \u2014 readout first so a changing digit count grows\n         leftward and the chevrons hold their place across page changes. -->\n    <li class=\"et-pagination-status\" aria-live=\"polite\">\n      <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestCompactStatus() }}</span>\n      <span class=\"et-pagination-readout-text\">{{ compactStatus() }}</span>\n    </li>\n    @if (compactControls().previous; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n    @if (compactControls().next; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n  } @else {\n    @for (item of items(); track $index) {\n      <li #paginationItem [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        @if (item.type === 'ellipsis') {\n          <span class=\"et-pagination-ellipsis\" aria-hidden=\"true\">\u2026</span>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n        }\n      </li>\n    }\n  }\n</ul>\n\n<ng-template #control let-item>\n  @if (hrefFor(item); as href) {\n    <a\n      [attr.href]=\"href\"\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"selectLink($event, item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </a>\n  } @else {\n    <button\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [disabled]=\"item.disabled\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"select(item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </button>\n  }\n</ng-template>\n\n@if (showJumpTo()) {\n  <div class=\"et-pagination-jump\">\n    <label [attr.for]=\"jumpInputId\" class=\"et-pagination-jump-label\">\n      {{ pagination.resolvedLabels().jumpTo }}\n    </label>\n    <input\n      #jumpInput\n      [min]=\"1\"\n      [max]=\"pagination.totalPages()\"\n      [id]=\"jumpInputId\"\n      (keydown.enter)=\"jump(jumpInput.value); jumpInput.value = ''\"\n      class=\"et-pagination-jump-input\"\n      inputmode=\"numeric\"\n      type=\"number\"\n    />\n  </div>\n}\n\n<ng-template #inner let-item>\n  @switch (item.type) {\n    @case ('first') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M11 3 6 8l5 5M5 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('previous') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M10 3 5 8l5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('next') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M6 3l5 5-5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('last') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M5 3l5 5-5 5M11 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @default {\n      {{ item.page }}\n    }\n  }\n</ng-template>\n", styles: ["@layer components{@property --et-pagination-item-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pagination-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-pagination-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}:where(.et-pagination-host){display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap)}@media(pointer:coarse){:where(.et-pagination-host){--et-pagination-item-size: 44px}.et-pagination-host{isolation:isolate}.et-pagination-host .et-pagination-button:before{content:\"\";position:absolute;z-index:-1;top:50%;left:50%;inline-size:max(100%,44px);block-size:max(100%,44px);translate:-50% -50%}}.et-pagination-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap);margin:0;padding:0;list-style:none}.et-pagination-item{display:flex}.et-pagination-host .et-pagination-button{--et-button-padding: 0;--et-button-border-radius: var(--et-pagination-radius);padding-inline:4px;min-inline-size:var(--et-pagination-item-size);min-block-size:var(--et-pagination-item-size);font-variant-numeric:tabular-nums}.et-pagination-host .et-pagination-button--control{padding-inline:0;inline-size:var(--et-pagination-item-size)}.et-pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--et-pagination-item-size);block-size:var(--et-pagination-item-size);color:var(--et-surface-color-muted-solid, CanvasText);-webkit-user-select:none;user-select:none}.et-pagination-range{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-range,.et-pagination-status{display:inline-grid;grid-template-columns:auto;justify-items:center}.et-pagination-readout-sizer,.et-pagination-readout-text{grid-area:1 / 1;white-space:nowrap}.et-pagination-readout-sizer{visibility:hidden}.et-pagination-jump{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-jump-input{inline-size:64px;min-block-size:var(--et-pagination-item-size);padding-inline:8px;font:inherit;font-variant-numeric:tabular-nums;color:var(--et-surface-color-solid, CanvasText);background:transparent;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));border-radius:var(--et-pagination-radius)}.et-pagination-jump-input:where(:focus-visible){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-pagination-host:where([data-size=sm]){--et-pagination-item-size: 28px;--et-pagination-gap: 4px}.et-pagination-host:where([data-size=sm]) .et-pagination-button{--et-button-padding: 2px 0;font-size:13px}.et-pagination-host:where([data-compact]){--et-pagination-item-size: 34px;--et-pagination-gap: 2px}.et-pagination-status{align-items:center;min-block-size:var(--et-pagination-item-size);padding-inline:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--et-surface-color-muted-solid, CanvasText)}}\n"] }]
+                        '[attr.data-fit-width]': 'fitsWidth() ? "" : null',
+                    }, template: "@if (!isCompact() && rangeStatus(); as status) {\n  <p class=\"et-pagination-range\" aria-live=\"polite\">\n    <!-- Invisible width floor; see widestRangeStatus. Stacked with the live text in one grid cell. -->\n    <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestRangeStatus() }}</span>\n    <span class=\"et-pagination-readout-text\">{{ status }}</span>\n  </p>\n}\n\n<ul #paginationList class=\"et-pagination-list\">\n  @if (isCompact()) {\n    <!-- Compact pager: the readout, then previous/next \u2014 readout first so a changing digit count grows\n         leftward and the chevrons hold their place across page changes. -->\n    <li class=\"et-pagination-status\" aria-live=\"polite\">\n      <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestCompactStatus() }}</span>\n      <span class=\"et-pagination-readout-text\">{{ compactStatus() }}</span>\n    </li>\n    @if (compactControls().previous; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n    @if (compactControls().next; as item) {\n      <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n      </li>\n    }\n  } @else {\n    @for (item of items(); track $index) {\n      <li #paginationItem [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n        @if (item.type === 'ellipsis') {\n          <span class=\"et-pagination-ellipsis\" aria-hidden=\"true\">\u2026</span>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n        }\n      </li>\n    }\n  }\n</ul>\n\n<ng-template #control let-item>\n  @if (hrefFor(item); as href) {\n    <a\n      [attr.href]=\"href\"\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"selectLink($event, item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </a>\n  } @else {\n    <button\n      [attr.aria-label]=\"item.label\"\n      [attr.aria-current]=\"item.current ? 'page' : null\"\n      [attr.data-type]=\"item.type\"\n      [variant]=\"item.current ? 'filled' : 'transparent'\"\n      [color]=\"item.current ? 'inherit' : 'surface'\"\n      [disabled]=\"item.disabled\"\n      [class.et-pagination-button--control]=\"item.type !== 'page'\"\n      (click)=\"select(item)\"\n      class=\"et-pagination-button\"\n      et-button\n      size=\"sm\"\n    >\n      <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n    </button>\n  }\n</ng-template>\n\n@if (showJumpTo()) {\n  <div class=\"et-pagination-jump\">\n    <label [attr.for]=\"jumpInputId\" class=\"et-pagination-jump-label\">\n      {{ pagination.resolvedLabels().jumpTo }}\n    </label>\n    <input\n      #jumpInput\n      [min]=\"1\"\n      [max]=\"pagination.totalPages()\"\n      [id]=\"jumpInputId\"\n      (keydown.enter)=\"jump(jumpInput.value); jumpInput.value = ''\"\n      class=\"et-pagination-jump-input\"\n      inputmode=\"numeric\"\n      type=\"number\"\n    />\n  </div>\n}\n\n<ng-template #inner let-item>\n  @switch (item.type) {\n    @case ('first') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M11 3 6 8l5 5M5 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('previous') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M10 3 5 8l5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('next') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M6 3l5 5-5 5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('last') {\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M5 3l5 5-5 5M11 3v10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.6\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @default {\n      {{ item.page }}\n    }\n  }\n</ng-template>\n", styles: ["@layer components{@property --et-pagination-item-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pagination-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-pagination-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}:where(.et-pagination-host){display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap)}:where(.et-pagination-host[data-fit-width]){flex-grow:1}@media(pointer:coarse){:where(.et-pagination-host){--et-pagination-item-size: 44px}.et-pagination-host{isolation:isolate}.et-pagination-host .et-pagination-button:before{content:\"\";position:absolute;z-index:-1;top:50%;left:50%;inline-size:max(100%,44px);block-size:max(100%,44px);translate:-50% -50%}}.et-pagination-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap);margin:0;padding:0;list-style:none}.et-pagination-item{display:flex}.et-pagination-host .et-pagination-button{--et-button-padding: 0;--et-button-border-radius: var(--et-pagination-radius);padding-inline:4px;min-inline-size:var(--et-pagination-item-size);min-block-size:var(--et-pagination-item-size);font-variant-numeric:tabular-nums}.et-pagination-host .et-pagination-button--control{padding-inline:0;inline-size:var(--et-pagination-item-size)}.et-pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--et-pagination-item-size);block-size:var(--et-pagination-item-size);color:var(--et-surface-color-muted-solid, CanvasText);-webkit-user-select:none;user-select:none}.et-pagination-range{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-range,.et-pagination-status{display:inline-grid;grid-template-columns:auto;justify-items:center}.et-pagination-readout-sizer,.et-pagination-readout-text{grid-area:1 / 1;white-space:nowrap}.et-pagination-readout-sizer{visibility:hidden}.et-pagination-jump{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-jump-input{inline-size:64px;min-block-size:var(--et-pagination-item-size);padding-inline:8px;font:inherit;font-variant-numeric:tabular-nums;color:var(--et-surface-color-solid, CanvasText);background:transparent;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));border-radius:var(--et-pagination-radius)}.et-pagination-jump-input:where(:focus-visible){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-pagination-host:where([data-size=sm]){--et-pagination-item-size: 28px;--et-pagination-gap: 4px}.et-pagination-host:where([data-size=sm]) .et-pagination-button{--et-button-padding: 2px 0;font-size:13px}.et-pagination-host:where([data-compact]){--et-pagination-item-size: 34px;--et-pagination-gap: 2px}.et-pagination-status{align-items:center;min-block-size:var(--et-pagination-item-size);padding-inline:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--et-surface-color-muted-solid, CanvasText)}}\n"] }]
         }], propDecorators: { renderAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderAs", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], urlForPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlForPage", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showJumpTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpTo", required: false }] }], listEl: [{ type: i0.ViewChild, args: ['paginationList', { isSignal: true }] }], itemEls: [{ type: i0.ViewChildren, args: ['paginationItem', { isSignal: true }] }] } });
 
 const PAGINATION_IMPORTS = [PaginationComponent, PaginationDirective];
@@ -57972,6 +57987,7 @@ const STREAM_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const container = renderer.createElement('div');
     renderer.addClass(container, 'et-stream-manager');
     renderer.appendChild(document.body, container);
+    inject(DestroyRef).onDestroy(() => container.remove());
     const viewportSize = injectViewportSize();
     const players = new Map();
     const slots = new Map();
@@ -59689,7 +59705,8 @@ const PIP_CHROME_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const destroyPipChrome = () => {
         if (!pipChromeRef)
             return;
-        appRef.detachView(pipChromeRef.hostView);
+        if (!appRef.destroyed)
+            appRef.detachView(pipChromeRef.hostView);
         pipChromeRef.destroy();
         pipChromeRef = null;
     };
@@ -60174,10 +60191,11 @@ class DailymotionPlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -60466,10 +60484,11 @@ class FacebookPlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -60654,10 +60673,11 @@ class KickPlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -60856,10 +60876,11 @@ class SoopPlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -61084,10 +61105,11 @@ class TikTokPlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -61376,10 +61398,11 @@ class TwitchPlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -61634,10 +61657,11 @@ class VimeoPlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -61868,10 +61892,11 @@ class YoutubePlayerDirective {
             },
         });
         effect(() => {
-            const error = this.playerResource.error();
+            const isLoading = this.playerResource.isLoading();
+            const error = isLoading ? undefined : this.playerResource.error();
             this.state.update((s) => ({
                 ...s,
-                isLoading: error !== undefined ? false : this.playerResource.isLoading(),
+                isLoading: error !== undefined ? false : isLoading,
                 error: error ?? null,
             }));
         });
@@ -64709,7 +64734,7 @@ class TableComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "attr.role": "pageStickyHeader() ? \"grid\" : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "class.et-table-host--header-adornments": "headerAdornments().length > 0", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
             { provide: TABLE_FEATURE_HOST, useExisting: TableComponent },
             provideIcons(ARROW_UP_ICON, TRIANGLE_EXCLAMATION_ICON),
-        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [label]=\"cell.message\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -64729,7 +64754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[class.et-table-host--header-adornments]': 'headerAdornments().length > 0',
                         '[style.--_et-table-viewport-inline-size.px]': 'viewportInlineSize()',
                         '(scroll)': 'syncScrollState()',
-                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
+                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [label]=\"cell.message\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], cellState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellState", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], quickFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilter", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], headerGridRef: [{ type: i0.ViewChild, args: ['headerGrid', { isSignal: true }] }], scrollerRef: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
 
 /**
@@ -64922,7 +64947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * @example
  * <!-- the Role column renders a chip, so its placeholder is chip-shaped -->
  * <ng-template [etTableCellSkeleton]="COLUMNS.role">
- *   <et-skeleton-item shape="rect" style="inline-size: 64px; block-size: 24px; --et-skeleton-radius: 999px" />
+ *   <et-skeleton-item shape="rect" [style.inline-size.px]="64" [style.block-size.px]="24" [style.--et-skeleton-radius.px]="999" />
  * </ng-template>
  */
 class TableCellSkeletonDirective {
@@ -65077,8 +65102,7 @@ class TableCellErrorMarkComponent {
       [etProvideColor]="feature.table.errorColorTheme"
       [etTooltip]="message()"
       [etTooltipDisabled]="!message()"
-      [attr.aria-label]="message()"
-      [attr.aria-hidden]="message() ? null : 'true'"
+      [label]="message()"
       [attr.tabindex]="message() ? 0 : null"
       class="et-table-cell-error-icon"
       etIcon="et-triangle-exclamation"
@@ -65094,8 +65118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       [etProvideColor]="feature.table.errorColorTheme"
       [etTooltip]="message()"
       [etTooltipDisabled]="!message()"
-      [attr.aria-label]="message()"
-      [attr.aria-hidden]="message() ? null : 'true'"
+      [label]="message()"
       [attr.tabindex]="message() ? 0 : null"
       class="et-table-cell-error-icon"
       etIcon="et-triangle-exclamation"
@@ -66286,9 +66309,10 @@ class TableGroupHeaderRowComponent {
         this.feature = inject(TableGroupHeadersDirective);
         this.table = injectTableFeatureHost('etTableGroupHeaders');
         // Measured so the column-header row can stick just below this one - see the feature's host binding.
+        // Every group cell shares one grid row, so the first one's height is the row's.
         this.groupCells = viewChildren('groupCell', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "groupCells" }] : /* istanbul ignore next */ []));
-        this.groupCellDimensions = signalElementDimensions(computed(() => [...this.groupCells()]));
+        this.groupCellDimensions = signalElementDimensions(computed(() => this.groupCells()[0] ?? null));
         /** Rendered height of the row, for the header row's sticky offset. */
         this.blockSize = computed(() => this.groupCellDimensions()?.offset?.height ?? 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "blockSize" }] : /* istanbul ignore next */ []));
@@ -67957,10 +67981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * standing in for the rest so the scrollbar still reflects the whole row count.
  *
  * The table is its own scroll container, so give it a bounded height (e.g.
- * `style="block-size: 24rem"`) for the window to track.
+ * `[style.block-size.rem]="24"` or a class) for the window to track.
  *
  * @example
- * <et-table [data]="manyRows()" [columns]="COLUMNS" style="block-size: 24rem" etTableVirtualScroll />
+ * <et-table [data]="manyRows()" [columns]="COLUMNS" [style.block-size.rem]="24" etTableVirtualScroll />
  *
  * <!-- with options -->
  * <et-table [etTableVirtualScroll]="{ estimateRowHeight: 52 }" … />
@@ -70257,7 +70281,7 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/components` this build was cut from. */
-const COMPONENTS_VERSION = '1.0.0-next.62';
+const COMPONENTS_VERSION = '1.0.0-next.63';
 
 /**
  * Generated bundle index. Do not edit.