@ethlete/components 1.0.0-next.72 → 1.0.0-next.73

package/fesm2022/ethlete-components.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, booleanAttribute, signal, inject, ElementRef, computed, effect, untracked, Directive, afterNextRender, DestroyRef, TemplateRef, model, linkedSignal, ViewEncapsulation, Component, ErrorHandler, numberAttribute, contentChildren, HostAttributeToken, Renderer2, output, viewChild, contentChild, NgZone, afterRenderEffect, ApplicationRef, DOCUMENT, ViewContainerRef, runInInjectionContext, createEnvironmentInjector, PLATFORM_ID, reflectComponentType, inputBinding, EnvironmentInjector, isSignal, Injector, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, CSP_NONCE } from '@angular/core';
 import * as i1 from '@ethlete/core';
-import { signalElementMutations, RuntimeError, injectHostElement, createComponentId, injectStyleManager, defineLabels, toProvideFn, toInjectFn, toToken, ProvideColorDirective, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSemanticColorTheme, injectColorThemes, injectLocale, defineStaticRootProvider, optionalBooleanAttribute as optionalBooleanAttribute$1, inferMimeType, mountVisuallyHidden, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, injectRootSurfaceTheme, ANIMATED_LIFECYCLE_TOKEN, injectDefaultSurfaceTheme, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, isElement, isHTMLElement, injectBreakpointObserver, hasAnchoredOverlayPositionExtras, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, injectUrl, 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, injectIsDocumentVisible, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectSurfaceColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, isSafeLinkUrl, markdownToHtml, MARKDOWN_VERBATIM_ATTR, injectHasTouchInput, isSafeUrl, signalHostElementMutations, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createSessionMemory, provideUnsavedChangesConfirm } from '@ethlete/core';
+import { signalElementMutations, RuntimeError, injectHostElement, createComponentId, injectStyleManager, defineLabels, toProvideFn, toInjectFn, toToken, ProvideColorDirective, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSemanticColorTheme, injectColorThemes, injectLocale, defineStaticRootProvider, optionalBooleanAttribute as optionalBooleanAttribute$1, inferMimeType, mountVisuallyHidden, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, injectRootSurfaceTheme, ANIMATED_LIFECYCLE_TOKEN, injectDefaultSurfaceTheme, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, isElement, isHTMLElement, injectBreakpointObserver, hasAnchoredOverlayPositionExtras, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, injectUrl, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, injectHasTouchInput, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, injectIsDocumentVisible, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectSurfaceColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, isSafeLinkUrl, markdownToHtml, MARKDOWN_VERBATIM_ATTR, isSafeUrl, signalHostElementMutations, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createSessionMemory, provideUnsavedChangesConfirm } from '@ethlete/core';
 import { NgTemplateOutlet, NgComponentOutlet, isPlatformServer, Location, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { queryStateSignal, isQueryStateLoading, withArgs, createQueryErrorResponse, isQueryStateSuccess, isQueryStateFailure, executeUntilSettled$, extractQuery, createPagedQueryStack, queryComputed, isLegacyQuery, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages } from '@ethlete/query';
 import { DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, COMMON_BRACKET_ROUND_TYPE, BracketRuntimeError, BRACKET_ERROR_CODES, SWISS_BRACKET_ROUND_TYPE, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, TOURNAMENT_MODE, BRACKET_DATA_LAYOUT, resolveBracketLayout as resolveBracketLayout$1, createBracket, createPlaceholderBracketSource, drawMan, createDoubleEliminationGrid, ɵcreateStackedDoubleEliminationGrid as _createStackedDoubleEliminationGrid, createSingleEliminationGrid, generateBracketRoundSwissGroupMaps, createSwissGrid, drawSwissMan, standingPickStartOrder } from '@ethlete/bracket';
 export { BRACKET_DATA_LAYOUT, BRACKET_ERROR_CODES, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BracketMap, BracketRuntimeError, COMMON_BRACKET_ROUND_TYPE, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, GROUP_BRACKET_ROUND_TYPE, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SWISS_BRACKET_ROUND_TYPE, TOURNAMENT_MODE, bracketSlot, createBracket, createPlaceholderBracketSource, isBracketSlotPredictable, migrateBracketPicks, resolveBracketSlot, standingRankSides, swapStandingRank, validateBracketSource } from '@ethlete/bracket';
 import { isValid, format, startOfWeek, startOfDay, endOfWeek, isBefore, addDays, endOfMonth, startOfMonth, isSameYear, isSameMonth, isSameDay, startOfYear, isAfter, addYears, addMonths, setMonth, getDate, setDate, lastDayOfMonth, getWeek, endOfYear, setYear, parse, setSeconds, setMinutes, setHours, subDays, subWeeks, subMonths, endOfDay, setMilliseconds, differenceInCalendarDays, getDaysInMonth, eachDayOfInterval, addHours } from 'date-fns';
-import { tap, Subject, take, filter, defer, map, finalize, timer, takeUntil, fromEvent, switchMap, observeOn, asapScheduler, combineLatest, distinctUntilChanged, EMPTY, startWith, debounceTime, merge, catchError, of, delay, isObservable, from, share, scan, concat, firstValueFrom, defaultIfEmpty, Subscription, Observable, interval, ignoreElements, skip, animationFrameScheduler, EmptyError, exhaustMap, shareReplay, throwError, expand, toArray, takeWhile, mergeMap } from 'rxjs';
+import { tap, Subject, take, filter, defer, map, finalize, Observable, merge, fromEvent, EMPTY, ignoreElements, timer, takeUntil, interval, switchMap, observeOn, asapScheduler, combineLatest, distinctUntilChanged, startWith, debounceTime, catchError, of, delay, isObservable, from, share, scan, concat, firstValueFrom, defaultIfEmpty, Subscription, skip, animationFrameScheduler, EmptyError, exhaustMap, shareReplay, throwError, expand, toArray, takeWhile, mergeMap } from 'rxjs';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/router';
 import { ROUTES, Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, NavigationSkipped, RouterLink, ActivatedRoute, RouterLinkActive } from '@angular/router';
@@ -9231,6 +9231,110 @@ const anchoredDialogOverlayStrategy = (options = {}) => {
     };
 };
 
+/**
+ * Tracks the gap between where `position: fixed; bottom: 0` renders and the top of the soft
+ * keyboard. Never emits; subscribing starts the tracking and unsubscribing stops it.
+ */
+const observeKeyboardInset = (tracking) => new Observable((subscriber) => {
+    const viewport = tracking.view.visualViewport;
+    if (!viewport)
+        return;
+    return trackKeyboardInset(tracking, viewport).subscribe(subscriber);
+});
+const trackKeyboardInset = ({ view, renderer, onInset, poll$ = EMPTY }, viewport) => {
+    // In a same-origin iframe (Storybook, docs story embeds) the frame's own visualViewport never
+    // reflects the soft keyboard - only the top window's does. Track the top viewport plus the
+    // frame's position to compute how much of THIS frame the keyboard covers. A cross-origin
+    // parent exposes neither (`frameElement` is null / viewport access throws), so those frames
+    // keep the local metrics - the status quo of not seeing the keyboard at all.
+    let frameElement = null;
+    let topViewport = null;
+    try {
+        // no instanceof here - frameElement belongs to the PARENT document's realm, so it is never
+        // an instance of this window's HTMLElement constructor
+        frameElement = view.frameElement;
+        topViewport = frameElement ? (view.top?.visualViewport ?? null) : null;
+    }
+    catch {
+        frameElement = null;
+        topViewport = null;
+    }
+    // Where "position: fixed; bottom: 0" actually lands is NOT derivable from window/visualViewport
+    // on iOS: with the soft keyboard open (and focus zoom active), WebKit positions fixed elements
+    // against an internal rect that tracks the visual viewport and is clamped to the document - its
+    // bottom sits well below where `innerHeight` says. Measure it with a zero-size fixed probe
+    // instead of assuming layout-viewport math; on engines without the quirk the probe bottom IS
+    // `innerHeight`, so this degenerates to the plain `innerHeight - height - offsetTop`.
+    const probe = renderer.createElement('div');
+    renderer.setCssProperties(probe, {
+        position: 'fixed',
+        'inset-block-end': '0',
+        'inline-size': '0',
+        'block-size': '0',
+        visibility: 'hidden',
+    });
+    renderer.appendChild(view.document.body, probe);
+    let lastApplied = -1;
+    const apply = () => {
+        const fixedBottom = probe.getBoundingClientRect().bottom;
+        let keyboardTop;
+        if (frameElement && topViewport) {
+            const covered = frameElement.getBoundingClientRect().bottom - (topViewport.offsetTop + topViewport.height);
+            keyboardTop = view.innerHeight - Math.max(0, covered);
+        }
+        else {
+            keyboardTop = viewport.offsetTop + viewport.height;
+        }
+        const inset = Math.max(0, fixedBottom - keyboardTop);
+        if (inset === lastApplied)
+            return false;
+        lastApplied = inset;
+        onInset(inset);
+        return true;
+    };
+    // iOS moves its fixed-position rect ASYNCHRONOUSLY while scrolling with the keyboard open (and
+    // fires few or no visualViewport events mid-scroll, including when the scroll itself dismisses
+    // the keyboard) - a single synchronous re-measure per event reads a stale probe rect. So each
+    // event kicks a rAF loop that keeps re-measuring until the inset has been stable for a few
+    // frames, then stops - continuous tracking while anything moves, zero per-frame work at rest.
+    let rafId = null;
+    let quietFrames = 0;
+    const settle = () => {
+        quietFrames = apply() ? 0 : quietFrames + 1;
+        // ~30 quiet frames (≈500ms) so the loop outlasts the keyboard show/hide animation - iOS can
+        // fire its last viewport event right at the animation's start while the fixed-position rect
+        // keeps moving until the end
+        rafId = quietFrames < 30 ? view.requestAnimationFrame(settle) : null;
+    };
+    const kick = () => {
+        quietFrames = 0;
+        apply();
+        rafId ??= view.requestAnimationFrame(settle);
+    };
+    kick();
+    const viewports = topViewport ? [viewport, topViewport] : [viewport];
+    // window scroll too: a root scroll pans the keyboard-tracking fixed rect without necessarily
+    // firing any visualViewport event (top window as well when embedded in an iframe)
+    const scrollTargets = [...viewports, view];
+    try {
+        if (frameElement && view.top)
+            scrollTargets.push(view.top);
+    }
+    catch {
+        // cross-origin top - its scrolls are invisible to us; the frame keeps local tracking
+    }
+    const viewportChange$ = merge(...viewports.map((v) => fromEvent(v, 'resize')), 
+    // These are ancestor viewports/windows (visualViewport, iframe top), not a component-owned
+    // scroll container - signalElementScrollState targets a known elementRef and doesn't apply.
+    // eslint-disable-next-line ethlete/prefer-scroll-state
+    ...scrollTargets.map((t) => fromEvent(t, 'scroll', { passive: true }))).pipe(tap(() => kick()));
+    return merge(poll$.pipe(tap(() => apply())), viewportChange$).pipe(ignoreElements(), finalize(() => {
+        if (rafId !== null)
+            view.cancelAnimationFrame(rafId);
+        probe.remove();
+    }));
+};
+
 /** Elements whose own pointer handling wins over a drag gesture on an ancestor. */
 const isInteractivePointerTarget = (target) => {
     const tag = target.tagName.toLowerCase();
@@ -9584,6 +9688,8 @@ const MIN_LEAVE_DURATION_MS = 100;
 const MAX_LEAVE_DURATION_MS = 350;
 /** Below this release speed the swipe carries no momentum worth handing off. */
 const MIN_LEAVE_SPEED = 50;
+/** How often a sheet lifted above the soft keyboard re-checks the keyboard, to recover a missed viewport event. */
+const KEYBOARD_POLL_MS = 500;
 /**
  * Gives the leave transition the speed the swipe had when it let go, instead of the fixed duration
  * the stylesheet uses for every other close. Only the duration is overridden - position is already
@@ -9597,9 +9703,40 @@ const applyDismissMomentum = ({ el, momentum }, renderer) => {
     renderer.setStyle(el, { transitionDuration: `${duration}ms` });
 };
 /** Shared strategy shape for all sheet variants: default enter/leave animations plus drag-to-dismiss. */
-const createSheetStrategy = (config, renderer) => {
+const createSheetStrategy = (config, { renderer, liftAboveKeyboard }) => {
     let dragToDismissRef;
     let dismissMomentum = null;
+    let keyboardLift;
+    const applyKeyboardLift = (pane, inset) => renderer.setCssProperties(pane, {
+        'margin-block-end': inset ? `${inset}px` : null,
+        '--et-overlay-max-height': inset ? `calc(100% - ${inset}px)` : null,
+    });
+    const stopKeyboardLift = (context) => {
+        if (!keyboardLift)
+            return;
+        keyboardLift.unsubscribe();
+        keyboardLift = undefined;
+        applyKeyboardLift(context.containerEl, 0);
+    };
+    const startKeyboardLift = (context) => {
+        stopKeyboardLift(context);
+        const view = context.containerEl.ownerDocument.defaultView;
+        if (!view || !liftAboveKeyboard?.())
+            return;
+        let inset = 0;
+        const lift = () => applyKeyboardLift(context.containerEl, inset);
+        keyboardLift = observeKeyboardInset({
+            view,
+            renderer,
+            onInset: (next) => {
+                inset = next;
+                lift();
+            },
+            // re-asserts the lift too: a strategy switch re-positions the pane after onSwitchedTo, which
+            // clears `--et-overlay-max-height`
+            poll$: interval(KEYBOARD_POLL_MS).pipe(tap(lift)),
+        }).subscribe();
+    };
     const attachDragToDismiss = (context) => {
         if (!config.dragToDismiss)
             return;
@@ -9623,11 +9760,18 @@ const createSheetStrategy = (config, renderer) => {
             // A close interrupted by a re-open must not inherit the previous swipe's duration.
             renderer.setStyle(context.containerEl, { transitionDuration: null });
             dismissMomentum = null;
+            startKeyboardLift(context);
             context.lifecycle.enter();
         },
         onAfterEnter: (context) => attachDragToDismiss(context),
-        onSwitchedTo: attachDragToDismiss,
-        onSwitchedAwayFrom: detachDragToDismiss,
+        onSwitchedTo: (context) => {
+            attachDragToDismiss(context);
+            startKeyboardLift(context);
+        },
+        onSwitchedAwayFrom: (context) => {
+            detachDragToDismiss();
+            stopKeyboardLift(context);
+        },
         onBeforeLeave: (context) => {
             detachDragToDismiss();
             if (dismissMomentum) {
@@ -9636,6 +9780,7 @@ const createSheetStrategy = (config, renderer) => {
             }
             context.lifecycle.leave();
         },
+        onAfterLeave: stopKeyboardLift,
     };
 };
 
@@ -9674,7 +9819,11 @@ const injectBottomSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(BOTTOM_SHEE
 const BOTTOM_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectBottomSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const hasTouchInput = injectHasTouchInput();
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), {
+        renderer,
+        liftAboveKeyboard: hasTouchInput,
+    });
     return {
         build,
     };
@@ -10366,7 +10515,7 @@ const injectLeftSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(LEFT_SHEET_ST
 const LEFT_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectLeftSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), { renderer });
     return {
         build,
     };
@@ -10404,7 +10553,7 @@ const injectRightSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(RIGHT_SHEET_
 const RIGHT_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectRightSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), { renderer });
     return {
         build,
     };
@@ -10488,7 +10637,7 @@ const injectTopSheetStrategyDefaults = /* @__PURE__ */ toInjectFn(TOP_SHEET_STRA
 const TOP_SHEET_STRATEGY_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const defaults = injectTopSheetStrategyDefaults();
     const renderer = injectRenderer();
-    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), renderer);
+    const build = (config = {}) => createSheetStrategy(mergeOverlayBreakpointConfigs(defaults, config), { renderer });
     return {
         build,
     };
@@ -15780,11 +15929,11 @@ const SCROLLABLE_DARKEN_IMPORTS = [ScrollableDarkenDirective];
 
 class CarouselAutoplayStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: CarouselAutoplayStylesComponent, isStandalone: true, selector: "et-carousel-autoplay-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg}to{rotate:0deg}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: CarouselAutoplayStylesComponent, isStandalone: true, selector: "et-carousel-autoplay-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg;opacity:0}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg;opacity:1}to{rotate:0deg;opacity:1}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-carousel-autoplay-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg}to{rotate:0deg}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"] }]
+            args: [{ selector: 'et-carousel-autoplay-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-carousel-dot-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 18px;}@property --et-carousel-dot-ring-width{syntax: \"<length>\"; inherits: true; initial-value: 2.5px;}.et-carousel-dot-progress{position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border-radius:50%;opacity:0;scale:.55;-webkit-mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)));mask:radial-gradient(closest-side,transparent calc(100% - var(--et-carousel-dot-ring-width)),black calc(100% - var(--et-carousel-dot-ring-width)))}.et-carousel-dot-progress-half{position:absolute;inset-block:0;inline-size:50%;overflow:hidden}.et-carousel-dot-progress-half:before{content:\"\";position:absolute;inset:0;background:var(--et-theme-color-primary-solid, currentColor);rotate:-180deg;opacity:0}.et-carousel-dot-progress-half:first-child{inset-inline-start:50%}.et-carousel-dot-progress-half:first-child:before{border-radius:0 100% 100% 0/0 50% 50% 0;transform-origin:0 50%}.et-carousel-dot-progress-half:last-child{inset-inline-start:0}.et-carousel-dot-progress-half:last-child:before{border-radius:100% 0 0 100%/50% 0 0 50%;transform-origin:100% 50%}@keyframes et-carousel-autoplay-sweep{0%{rotate:-180deg;opacity:1}to{rotate:0deg;opacity:1}}.et-carousel-dot{position:relative}.et-carousel-dot:after{content:\"\";position:absolute;inline-size:var(--et-carousel-dot-ring-size);block-size:var(--et-carousel-dot-ring-size);border:var(--et-carousel-dot-ring-width) solid color-mix(in srgb,var(--et-surface-interaction-solid, gray) 30%,transparent);border-radius:50%;opacity:0;scale:.55}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress{opacity:1;scale:1}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:before{animation:et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5s) / 2) linear forwards}.et-carousel-dot:where([data-counting]) .et-carousel-dot-progress-half:last-child:before{animation-delay:calc(var(--_et-carousel-autoplay-duration, 5s) / 2)}.et-carousel-dot:where([data-counting]):after{opacity:1;scale:1}.et-carousel-dot:where([data-counting]):before{scale:.75}.et-carousel .et-carousel-play-toggle .et-icon-button-icon{display:grid;place-items:center}.et-carousel-play-toggle .et-carousel-play-toggle-icon{grid-area:1 / 1;opacity:0;scale:.55;rotate:-35deg}.et-carousel-play-toggle:not([data-playing]) .et-icon--et-play,.et-carousel-play-toggle:where([data-playing]) .et-icon--et-pause{opacity:1;scale:1;rotate:0deg}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot-progress,.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:after{transition:opacity .22s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-play-toggle-icon{transition:opacity .18s var(--ease-3, ease-out),scale .18s var(--ease-3, ease-out),rotate .22s var(--ease-3, ease-out)}}\n"] }]
         }] });
 
 const CAROUSEL_TOKEN = new InjectionToken('CAROUSEL_TOKEN');
@@ -15795,8 +15944,8 @@ const MAX_TIMER_DELAY = 2_147_483_647;
  * Advances the carousel on its own. Opt-in - put it on the same element as `[etCarousel]` - so a carousel
  * that doesn't move by itself carries none of this.
  *
- * It pauses whenever moving the page under the user would be rude: pointer over the carousel, focus
- * inside it, the carousel scrolled off screen, or the user having asked for reduced motion (in which case
+ * It pauses whenever moving the page under the user would be rude: a finger or the pointer on the
+ * carousel, focus inside it, the carousel scrolled off screen, or the user having asked for reduced motion (in which case
  * it never starts at all). It also stops at the last slide when the carousel doesn't `loop`, rather than
  * jumping back to the start forever.
  *
@@ -15860,6 +16009,9 @@ class CarouselAutoplayDirective {
         this.isHovered = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
         /** @internal */
+        this.isTouched = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
+        /** @internal */
         this.isFocusWithin = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isFocusWithin" }] : /* istanbul ignore next */ []));
         /**
@@ -15901,6 +16053,8 @@ class CarouselAutoplayDirective {
                 if (!isOnScreen)
                     return 'off-screen';
             }
+            if (this.isTouched())
+                return 'touch';
             if (this.pauseOnHover() && this.isHovered() && !this.isPointerOnPauseControl())
                 return 'hover';
             if (this.pauseOnFocus() && this.isFocusWithin() && !this.isFocusOnPauseControl())
@@ -15966,6 +16120,9 @@ class CarouselAutoplayDirective {
             return;
         this.isHovered.set(isHovered);
     }
+    setTouched(event) {
+        this.isTouched.set(event.touches.length > 0);
+    }
     advance() {
         const carousel = this.carousel;
         if (!carousel)
@@ -15977,7 +16134,7 @@ class CarouselAutoplayDirective {
         carousel.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: CarouselAutoplayDirective, isStandalone: true, selector: "[etCarouselAutoplay]", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, autoplayTime: { classPropertyName: "autoplayTime", publicName: "autoplayTime", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, pauseOnOffScreen: { classPropertyName: "pauseOnOffScreen", publicName: "pauseOnOffScreen", isSignal: true, isRequired: false, transformFunction: null }, playOnInit: { classPropertyName: "playOnInit", publicName: "playOnInit", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "setHovered($event, true)", "pointerleave": "setHovered($event, false)", "focusin": "isFocusWithin.set(true)", "focusout": "isFocusWithin.set(false)" }, properties: { "attr.data-autoplaying": "isPlaying() ? \"\" : null" } }, providers: [{ provide: CAROUSEL_AUTOPLAY_TOKEN, useExisting: CarouselAutoplayDirective }], exportAs: ["etCarouselAutoplay"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: CarouselAutoplayDirective, isStandalone: true, selector: "[etCarouselAutoplay]", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, autoplayTime: { classPropertyName: "autoplayTime", publicName: "autoplayTime", isSignal: true, isRequired: false, transformFunction: null }, pauseOnHover: { classPropertyName: "pauseOnHover", publicName: "pauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, pauseOnFocus: { classPropertyName: "pauseOnFocus", publicName: "pauseOnFocus", isSignal: true, isRequired: false, transformFunction: null }, pauseOnOffScreen: { classPropertyName: "pauseOnOffScreen", publicName: "pauseOnOffScreen", isSignal: true, isRequired: false, transformFunction: null }, playOnInit: { classPropertyName: "playOnInit", publicName: "playOnInit", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerenter": "setHovered($event, true)", "pointerleave": "setHovered($event, false)", "touchstart": "isTouched.set(true)", "touchend": "setTouched($event)", "touchcancel": "setTouched($event)", "focusin": "isFocusWithin.set(true)", "focusout": "isFocusWithin.set(false)" }, properties: { "attr.data-autoplaying": "isPlaying() ? \"\" : null" } }, providers: [{ provide: CAROUSEL_AUTOPLAY_TOKEN, useExisting: CarouselAutoplayDirective }], exportAs: ["etCarouselAutoplay"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselAutoplayDirective, decorators: [{
             type: Directive,
@@ -15989,6 +16146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-autoplaying]': 'isPlaying() ? "" : null',
                         '(pointerenter)': 'setHovered($event, true)',
                         '(pointerleave)': 'setHovered($event, false)',
+                        '(touchstart)': 'isTouched.set(true)',
+                        '(touchend)': 'setTouched($event)',
+                        '(touchcancel)': 'setTouched($event)',
                         '(focusin)': 'isFocusWithin.set(true)',
                         '(focusout)': 'isFocusWithin.set(false)',
                     },
@@ -28027,7 +28187,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()], queries: [{ propertyName: "description", first: true, predicate: DescriptionComponent, isSignal: true }], 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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\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;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}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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[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"] }], 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()], queries: [{ propertyName: "description", first: true, predicate: DescriptionComponent, isSignal: true }], 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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\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;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}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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[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}}@media(pointer:coarse){et-form-field :is(input:not([type=checkbox],[type=radio],[type=range]),textarea){font-size:max(1em,16px)}}}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -28067,7 +28227,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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\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;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}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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[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<ng-content select=\"et-description\" />\n\n@if (support.shouldRenderSupport()) {\n  <div\n    [style.block-size.px]=\"support.supportHeight()\"\n    [attr.data-can-animate]=\"support.supportCanAnimate() || null\"\n    class=\"et-form-field-support\"\n    etColorInteractiveExclude\n  >\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;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}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-ink-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-ink-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-support[data-can-animate]{transition:block-size var(--et-form-field-support-duration) ease}et-form-field .et-form-field-support[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field .et-form-field-support[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}}@media(pointer:coarse){et-form-field :is(input:not([type=checkbox],[type=radio],[type=range]),textarea){font-size:max(1em,16px)}}}\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 }] }], description: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DescriptionComponent), { ...{ descendants: false }, isSignal: true }] }] } });
 
 const INPUT_MASK_HOST = new InjectionToken('INPUT_MASK_HOST');
@@ -46773,121 +46933,21 @@ class RichTextEditorComponent {
             .subscribe();
     }
     /**
-     * Keeps `--_et-rte-keyboard-inset` at the gap between where `position: fixed; bottom: 0` renders
-     * and the top of the soft keyboard, so the docked toolbar sits on the keyboard. Written straight to
-     * the host, not through a signal, so scrolling never schedules change detection.
+     * Keeps `--_et-rte-keyboard-inset` at the soft keyboard's inset, so the docked toolbar sits on the
+     * keyboard. Written straight to the host, not through a signal, so scrolling never schedules change
+     * detection.
      */
     keyboardInset$() {
-        return new Observable((subscriber) => {
-            const view = this.document.defaultView;
-            const viewport = view?.visualViewport;
-            if (!view || !viewport)
-                return;
-            return this.observeKeyboardInset(view, viewport).subscribe(subscriber);
-        });
-    }
-    observeKeyboardInset(view, viewport) {
+        const view = this.document.defaultView;
+        if (!view)
+            return EMPTY;
         const host = this.host.nativeElement;
-        // In a same-origin iframe (Storybook, docs story embeds) the frame's own visualViewport never
-        // reflects the soft keyboard - only the top window's does. Track the top viewport plus the
-        // frame's position to compute how much of THIS frame the keyboard covers. A cross-origin
-        // parent exposes neither (`frameElement` is null / viewport access throws), so those frames
-        // keep the local metrics - the status quo of not seeing the keyboard at all.
-        let frameElement = null;
-        let topViewport = null;
-        try {
-            // no instanceof here - frameElement belongs to the PARENT document's realm, so it is never
-            // an instance of this window's HTMLElement constructor
-            frameElement = view.frameElement;
-            topViewport = frameElement ? (view.top?.visualViewport ?? null) : null;
-        }
-        catch {
-            frameElement = null;
-            topViewport = null;
-        }
-        // Where "position: fixed; bottom: 0" actually lands is NOT derivable from window/visualViewport
-        // on iOS: with the soft keyboard open (and focus zoom active), WebKit positions fixed elements
-        // against an internal rect that tracks the visual viewport and is clamped to the document - its
-        // bottom sits well below where `innerHeight` says. Measure it with a zero-size fixed probe
-        // instead of assuming layout-viewport math; on engines without the quirk the probe bottom IS
-        // `innerHeight`, so this degenerates to the plain `innerHeight - height - offsetTop`.
-        const probe = this.renderer.createElement('div');
-        this.renderer.setCssProperties(probe, {
-            position: 'fixed',
-            'inset-block-end': '0',
-            'inline-size': '0',
-            'block-size': '0',
-            visibility: 'hidden',
+        return observeKeyboardInset({
+            view,
+            renderer: this.renderer,
+            onInset: (inset) => this.renderer.setCssProperty(host, '--_et-rte-keyboard-inset', `${inset}px`),
+            poll$: toObservable(this.dockedToolbar, { injector: this.injector }).pipe(switchMap((docked) => (docked ? interval(DOCKED_TOOLBAR_POLL_MS) : EMPTY))),
         });
-        this.renderer.appendChild(this.document.body, probe);
-        let lastApplied = -1;
-        const apply = () => {
-            const fixedBottom = probe.getBoundingClientRect().bottom;
-            let keyboardTop;
-            if (frameElement && topViewport) {
-                // keyboard overlap of this frame, in the frame's own client coordinates
-                const covered = frameElement.getBoundingClientRect().bottom - (topViewport.offsetTop + topViewport.height);
-                keyboardTop = view.innerHeight - Math.max(0, covered);
-            }
-            else {
-                keyboardTop = viewport.offsetTop + viewport.height;
-            }
-            const inset = Math.max(0, fixedBottom - keyboardTop);
-            if (inset === lastApplied)
-                return false;
-            lastApplied = inset;
-            this.renderer.setCssProperty(host, '--_et-rte-keyboard-inset', `${inset}px`);
-            return true;
-        };
-        // iOS moves its fixed-position rect ASYNCHRONOUSLY while scrolling with the keyboard open (and
-        // fires few or no visualViewport events mid-scroll, including when the scroll itself dismisses
-        // the keyboard) - a single synchronous re-measure per event reads a stale probe rect and the
-        // toolbar drifts under the keyboard. So each event kicks a rAF loop that keeps re-measuring
-        // until the inset has been stable for a few frames, then stops - continuous tracking while
-        // anything moves, zero per-frame work at rest.
-        let rafId = null;
-        let quietFrames = 0;
-        const settle = () => {
-            quietFrames = apply() ? 0 : quietFrames + 1;
-            // ~30 quiet frames (≈500ms) so the loop outlasts the keyboard show/hide animation - iOS can
-            // fire its last viewport event right at the animation's start while the fixed-position rect
-            // keeps moving until the end
-            rafId = quietFrames < 30 ? view.requestAnimationFrame(settle) : null;
-        };
-        const kick = () => {
-            quietFrames = 0;
-            apply();
-            rafId ??= view.requestAnimationFrame(settle);
-        };
-        kick();
-        // The event stream is not guaranteed to be complete: a soft keyboard can change height without a
-        // viewport event (Gboard switching layout, a suggestion row appearing), and inside an embedded
-        // frame the event may land while the ancestor layout is still moving. Either leaves the bar parked
-        // for a keyboard that is no longer there - floating over the content instead of sitting on it. So
-        // re-measure on a slow timer for as long as the bar is actually docked: one rect read every
-        // POLL_MS, no rAF loop and no change detection, and a stale position heals within half a second.
-        const poll$ = toObservable(this.dockedToolbar, { injector: this.injector }).pipe(switchMap((docked) => (docked ? interval(DOCKED_TOOLBAR_POLL_MS) : EMPTY)), tap(() => apply()));
-        const viewports = topViewport ? [viewport, topViewport] : [viewport];
-        // window scroll too: a root scroll pans the keyboard-tracking fixed rect without necessarily
-        // firing any visualViewport event (top window as well when embedded in an iframe)
-        const scrollTargets = [...viewports, view];
-        try {
-            if (frameElement && view.top)
-                scrollTargets.push(view.top);
-        }
-        catch {
-            // cross-origin top - its scrolls are invisible to us; the frame keeps local tracking
-        }
-        const viewportChange$ = merge(...viewports.map((v) => fromEvent(v, 'resize')), 
-        // These are ancestor viewports/windows (visualViewport, iframe top), not a component-owned
-        // scroll container - signalElementScrollState targets a known elementRef and doesn't apply.
-        // eslint-disable-next-line ethlete/prefer-scroll-state
-        ...scrollTargets.map((t) => fromEvent(t, 'scroll', { passive: true }))).pipe(tap(() => kick()));
-        return merge(poll$, viewportChange$).pipe(ignoreElements(), finalize(() => {
-            if (rafId !== null)
-                view.cancelAnimationFrame(rafId);
-            probe.remove();
-        }));
     }
     /** `editingActive` follows the editor's focus, but lingers ~400ms after a blur so a menu/link
      *  editor opened from the docked toolbar (which takes focus into an overlay) keeps the bar up. */
@@ -77177,7 +77237,7 @@ const provideUnsavedChangesAlertDialog = () => provideUnsavedChangesConfirm(() =
 
 // 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.72';
+const COMPONENTS_VERSION = '1.0.0-next.73';
 
 /**
  * Generated bundle index. Do not edit.