@ethlete/components 1.0.0-next.67 → 1.0.0-next.69

package/fesm2022/ethlete-components.mjs

@@ -7,7 +7,7 @@ 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, setMilliseconds, differenceInCalendarDays, endOfDay, getDaysInMonth, eachDayOfInterval, addHours } from 'date-fns';
+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 { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/router';
@@ -16,6 +16,7 @@ import { createMetadataKey, metadata, FORM_FIELD, validate, createManagedMetadat
 import { tz, TZDate } from '@date-fns/tz';
 import { enUS } from 'date-fns/locale/en-US';
 import { tap as tap$1 } from 'rxjs/operators';
+import { HttpEventType } from '@angular/common/http';
 
 // codes 3600-3699
 const ACCORDION_ERROR_CODES = {
@@ -7361,6 +7362,7 @@ const createOverlayRef = (config) => {
             .pipe(take(1), tap((rawEvent) => {
             const event = withDismissResult(rawEvent);
             busyAttributeEffect.destroy();
+            afterOpened$.complete();
             afterClosed$.next(event.result);
             afterClosed$.complete();
             afterClosedEvent$.next(event);
@@ -7403,6 +7405,10 @@ const createOverlayRef = (config) => {
             _componentInstanceOverride = getter;
         },
         closeVia: (source, result) => _runtimeRef?.close(result, source),
+        isClosing: () => {
+            const state = _runtimeRef?.state();
+            return state === 'closing' || state === 'closed';
+        },
         registerHeaderTemplate: (template) => {
             _headerTemplates.update((templates) => [...templates.filter((t) => t !== template), template]);
             return () => _headerTemplates.update((templates) => templates.filter((t) => t !== template));
@@ -11278,7 +11284,7 @@ const OVERLAY_SCROLL_BLOCKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
         }
         return documents;
     }, { ...(ngDevMode ? { debugName: "blockedDocuments" } : /* istanbul ignore next */ {}), equal: (a, b) => a.size === b.size && [...a].every((entry) => b.has(entry)) });
-    const savedTops = new Map();
+    const savedOffsets = new Map();
     const canScrollVertically = (target, mainDocumentCanScroll) => {
         if (target === document)
             return mainDocumentCanScroll;
@@ -11287,20 +11293,21 @@ const OVERLAY_SCROLL_BLOCKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
     };
     const lock = (target) => {
         const top = target.defaultView?.scrollY ?? 0;
-        savedTops.set(target, top);
+        const left = target.defaultView?.scrollX ?? 0;
+        savedOffsets.set(target, { top, left });
         renderer.setStyle(target.documentElement, {
             position: 'fixed',
             top: `-${top}px`,
-            left: '0',
-            right: '0',
+            left: `${-left}px`,
+            right: `${left}px`,
             overflowY: 'scroll',
         });
     };
     const unlock = (target) => {
-        const top = savedTops.get(target);
-        if (top === undefined)
+        const offsets = savedOffsets.get(target);
+        if (!offsets)
             return;
-        savedTops.delete(target);
+        savedOffsets.delete(target);
         const root = target.documentElement;
         renderer.setStyle(root, {
             position: null,
@@ -11310,18 +11317,18 @@ const OVERLAY_SCROLL_BLOCKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
             overflowY: null,
             scrollBehavior: 'auto',
         });
-        target.defaultView?.scrollTo(0, top);
+        target.defaultView?.scrollTo(offsets.left, offsets.top);
         renderer.setStyle(root, { scrollBehavior: null });
     };
-    inject(DestroyRef).onDestroy(() => [...savedTops.keys()].forEach(unlock));
+    inject(DestroyRef).onDestroy(() => [...savedOffsets.keys()].forEach(unlock));
     combineLatest([toObservable(blockedDocuments), toObservable(documentScrollState)])
         .pipe(tap(([blocked, scrollState]) => {
-        for (const target of [...savedTops.keys()]) {
+        for (const target of [...savedOffsets.keys()]) {
             if (!blocked.has(target))
                 unlock(target);
         }
         for (const target of blocked) {
-            if (!savedTops.has(target) && canScrollVertically(target, scrollState.canScrollVertically)) {
+            if (!savedOffsets.has(target) && canScrollVertically(target, scrollState.canScrollVertically)) {
                 lock(target);
             }
         }
@@ -13715,7 +13722,7 @@ class CalendarDirective {
             const locale = this.effectiveLocale();
             const labelOptions = locale ? { locale } : undefined;
             const weekStartsOn = this.effectiveFirstDayOfWeek();
-            const firstWeekContainsDate = locale?.options?.firstWeekContainsDate ?? 1;
+            const firstWeekContainsDate = locale ? (locale.options?.firstWeekContainsDate ?? 1) : 4;
             const readSelection = this.selectionReader('month');
             return Array.from({ length: this.monthsShown() }, (_, offset) => {
                 const month = addMonths(firstMonth, offset);
@@ -16228,6 +16235,17 @@ const useCarouselLoop = (config) => {
 };
 
 const SCROLL_IDLE_DURATION = 140;
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End',
+    ' ',
+]);
 /** In its own function so the `in` check doesn't narrow the element away for everything after it. */
 const supportsScrollEnd = (element) => 'onscrollend' in element;
 /**
@@ -16272,6 +16290,9 @@ const useCarouselScrollSettled = (config) => {
         return merge(settled$.pipe(tap(() => settle())), fromEvent(scrollContainer, 'pointerdown', { passive: true }).pipe(tap(() => {
             isPointerDown.set(true);
             config.onPointerDown?.();
+        })), fromEvent(scrollContainer, 'wheel', { passive: true }).pipe(tap(() => config.onScrollInput?.())), fromEvent(scrollContainer, 'keydown').pipe(tap((event) => {
+            if (SCROLL_KEYS.has(event.key))
+                config.onScrollInput?.();
         })), 
         // on the document, because a drag that starts on the track routinely ends off it
         fromEvent(document, 'pointerup', { passive: true }).pipe(tap(release)), fromEvent(document, 'pointercancel', { passive: true }).pipe(tap(release)));
@@ -16583,6 +16604,7 @@ class CarouselDirective {
          */
         this.requestedDomIndex = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "requestedDomIndex" }] : /* istanbul ignore next */ []));
+        this.readSettled = null;
         /** @internal Which child the intersections say is in view - the truth, a frame or two late. */
         this.observedDomIndex = computed(() => {
             const scrollable = this.scrollable();
@@ -16677,7 +16699,9 @@ class CarouselDirective {
                     slideProgress.flush();
             },
             onPointerDown: () => this.requestedDomIndex.set(null),
+            onScrollInput: () => this.requestedDomIndex.set(null),
         });
+        this.readSettled = loop.readSettled;
         let agreedIndex = null;
         effect(() => {
             const current = this.currentIndex();
@@ -16779,6 +16803,12 @@ class CarouselDirective {
         const scrollable = this.scrollable();
         if (!scrollable || domIndex < 0 || domIndex >= this.domCount())
             return;
+        // The track does not scroll to where it already rests, so no settle would ever clear this request.
+        if (this.requestedDomIndex() === null &&
+            domIndex === this.observedDomIndex() &&
+            this.readSettled?.()?.restsOn(domIndex)) {
+            return;
+        }
         const from = this.activeDomIndex();
         const origin = this.scrollOriginOf(scrollable);
         const distance = from < 0 ? 0 : domIndex - from;
@@ -21825,7 +21855,8 @@ class CommandPaletteShortcutDirective {
     toggle() {
         const openPalette = this.overlayManager
             .openOverlays()
-            .find((overlayRef) => overlayRef.componentInstance() instanceof CommandPaletteComponent);
+            .find((overlayRef) => overlayRef.componentInstance() instanceof CommandPaletteComponent &&
+            !getOverlayRefInternals(overlayRef)?.isClosing());
         if (openPalette) {
             openPalette.close();
             return;
@@ -23344,6 +23375,9 @@ const formSupportFactory = () => {
     const warningDimensions = signalElementDimensions(warningContent);
     const hintDimensions = signalElementDimensions(hintContent);
     const counterDimensions = signalElementDimensions(counterContent);
+    const hostDimensions = signalElementDimensions(inject(ElementRef));
+    const hostShown = computed(() => (hostDimensions().offset?.width ?? 0) > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostShown" }] : /* istanbul ignore next */ []));
     const effectiveErrors = computed(() => {
         const parseMessage = formFieldDir.parseError() ? formFieldDir.parseErrorMessage() : null;
         return parseMessage ? [{ kind: 'etParseError', message: parseMessage }] : formFieldDir.errors();
@@ -23424,7 +23458,11 @@ const formSupportFactory = () => {
         return supportPresentation().renderedWarnings;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleWarnings" }] : /* istanbul ignore next */ []));
+    const supportCanAnimate = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "supportCanAnimate" }] : /* istanbul ignore next */ []));
     const supportHeight = computed(() => {
+        if (!supportCanAnimate())
+            return null;
         const stackHeight = (() => {
             switch (semanticSupportState()) {
                 case SUPPORT_CONTENT_STATE.ERROR:
@@ -23441,6 +23479,31 @@ const formSupportFactory = () => {
         return Math.max(stackHeight, counterHeight);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "supportHeight" }] : /* istanbul ignore next */ []));
+    const activeContentWidth = computed(() => {
+        switch (semanticSupportState()) {
+            case SUPPORT_CONTENT_STATE.ERROR:
+                return errorDimensions().offset?.width ?? 0;
+            case SUPPORT_CONTENT_STATE.WARNING:
+                return warningDimensions().offset?.width ?? 0;
+            case SUPPORT_CONTENT_STATE.HINT:
+                return hintDimensions().offset?.width ?? 0;
+            default:
+                return null;
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeContentWidth" }] : /* istanbul ignore next */ []));
+    // support content already there when the control lays out - first, or again after a hidden
+    // ancestor (an inactive tab panel) shows it - must sit in place in that frame without animating;
+    // the measured height lands a frame late, so the region keeps its natural height until this arms
+    effect((onCleanup) => {
+        if (!hostShown()) {
+            supportCanAnimate.set(false);
+            return;
+        }
+        if (supportCanAnimate() || activeContentWidth() === 0)
+            return;
+        onCleanup(nextFrame(() => supportCanAnimate.set(true)));
+    });
     for (const [state, animatable] of [
         [SUPPORT_CONTENT_STATE.ERROR, errorAnimatable],
         [SUPPORT_CONTENT_STATE.WARNING, warningAnimatable],
@@ -23500,6 +23563,7 @@ const formSupportFactory = () => {
         visibleErrors,
         visibleWarnings,
         supportHeight,
+        supportCanAnimate: supportCanAnimate.asReadonly(),
     };
 };
 const FORM_SUPPORT_DEF = /* @__PURE__ */ defineProvider(formSupportFactory, {
@@ -24066,12 +24130,15 @@ class TextFieldControlDirective extends TextShellControlDirective {
     }
     /** @internal For a directive placed on the native element itself - a wrapper component binds these in its template. */
     mirrorOntoNativeHost(element, state) {
-        effect(() => {
-            const value = state.value();
-            if (!state.skip?.() && element.value !== value) {
-                this.nativeHostRenderer.setProperty(element, 'value', value);
-            }
-        });
+        const readValue = state.value;
+        if (readValue) {
+            effect(() => {
+                const value = readValue();
+                if (!state.skip?.() && element.value !== value) {
+                    this.nativeHostRenderer.setProperty(element, 'value', value);
+                }
+            });
+        }
         const type = state.type;
         if (type) {
             effect(() => this.nativeHostRenderer.setProperty(element, 'type', type()));
@@ -24191,6 +24258,7 @@ const toChildrenObservable$1 = (result) => toObservableResult(result);
 const toSearchObservable = (result) => toObservableResult(result);
 /** Normalizes a `resolvePath` result (array | null | Promise | Observable) into an Observable. */
 const toPathObservable = (result) => toObservableResult(result);
+const isPathDisabled = (path) => path.some((node) => node.disabled);
 
 const CASCADER_SELECTABLE_LEVELS = {
     /** Only terminal leaves commit a value (default). */
@@ -25016,7 +25084,7 @@ class CascaderDirective extends FieldStateControlDirective {
     /** Activates a search result: commits selectable nodes, jumps the browse state to branch-only matches. */
     activateSearchResult(path) {
         const node = path[path.length - 1];
-        if (!node || node.disabled || this.disabled() || this.readonly()) {
+        if (!node || isPathDisabled(path) || this.disabled() || this.readonly()) {
             return;
         }
         if (canHaveChildren(node) && this.selectableLevels() !== CASCADER_SELECTABLE_LEVELS.ANY) {
@@ -25036,7 +25104,7 @@ class CascaderDirective extends FieldStateControlDirective {
     /** @internal Enter in the search input activates the focused result, or the first enabled one. */
     activateFocusedSearchResult() {
         const results = this.searchState().results;
-        const path = results[this.focusedSearchIndex()] ?? results.find((candidate) => !candidate[candidate.length - 1]?.disabled);
+        const path = results[this.focusedSearchIndex()] ?? results.find((candidate) => !isPathDisabled(candidate));
         if (path) {
             this.activateSearchResult(path);
         }
@@ -25111,7 +25179,7 @@ class CascaderDirective extends FieldStateControlDirective {
         const results = this.searchState().results;
         for (let index = from; index >= 0 && index < results.length; index += step) {
             const path = results[index];
-            if (path && !path[path.length - 1]?.disabled) {
+            if (path && !isPathDisabled(path)) {
                 return index;
             }
         }
@@ -25473,7 +25541,7 @@ class CascaderSearchOptionDirective {
         /** The path's final node - the one an activation commits (or drills into). */
         this.node = computed(() => this.path()[this.path().length - 1] ?? null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
-        this.disabled = computed(() => this.node()?.disabled ?? false, /* @ts-ignore */
+        this.disabled = computed(() => isPathDisabled(this.path()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.selected = computed(() => {
             const node = this.node();
@@ -26752,11 +26820,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  */
 class FormSupportStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormSupportStylesComponent, isStandalone: true, selector: "et-form-support-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;block-size:0;unicode-bidi:isolate}.et-form-support-stack{position:relative;display:grid}.et-form-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}.et-form-support-content[data-active]{opacity:1}.et-form-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}.et-form-support-errors,.et-form-support-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;color:var(--et-theme-color-ink-solid, currentColor)}.et-form-support-errors{font-size:var(--et-form-support-error-font-size)}.et-form-support-warnings{font-size:var(--et-form-support-warning-font-size)}.et-form-support-hint{padding-block-start:4px;font-size:var(--et-form-support-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-form-support-hint:empty{display:none}[data-can-animate] .et-form-support{transition:block-size var(--et-form-support-duration) ease}[data-can-animate] .et-form-support-content{transition:opacity var(--et-form-support-duration) ease}@starting-style{[data-can-animate] .et-form-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){.et-form-support{--et-form-support-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormSupportStylesComponent, isStandalone: true, selector: "et-form-support-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;unicode-bidi:isolate}.et-form-support-stack{position:relative;display:grid}.et-form-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}.et-form-support-content[data-active]{opacity:1}.et-form-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}.et-form-support-errors,.et-form-support-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;color:var(--et-theme-color-ink-solid, currentColor)}.et-form-support-errors{font-size:var(--et-form-support-error-font-size)}.et-form-support-warnings{font-size:var(--et-form-support-warning-font-size)}.et-form-support-hint{padding-block-start:4px;font-size:var(--et-form-support-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-form-support-hint:empty{display:none}.et-form-support[data-can-animate]{transition:block-size var(--et-form-support-duration) ease}.et-form-support[data-can-animate] .et-form-support-content{transition:opacity var(--et-form-support-duration) ease}@starting-style{.et-form-support[data-can-animate] .et-form-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){.et-form-support{--et-form-support-duration: 1ms}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-form-support-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;block-size:0;unicode-bidi:isolate}.et-form-support-stack{position:relative;display:grid}.et-form-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}.et-form-support-content[data-active]{opacity:1}.et-form-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}.et-form-support-errors,.et-form-support-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;color:var(--et-theme-color-ink-solid, currentColor)}.et-form-support-errors{font-size:var(--et-form-support-error-font-size)}.et-form-support-warnings{font-size:var(--et-form-support-warning-font-size)}.et-form-support-hint{padding-block-start:4px;font-size:var(--et-form-support-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-form-support-hint:empty{display:none}[data-can-animate] .et-form-support{transition:block-size var(--et-form-support-duration) ease}[data-can-animate] .et-form-support-content{transition:opacity var(--et-form-support-duration) ease}@starting-style{[data-can-animate] .et-form-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){.et-form-support{--et-form-support-duration: 1ms}}}\n"] }]
+            args: [{ selector: 'et-form-support-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-form-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-support-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-support-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}.et-form-support{display:block;overflow:clip;unicode-bidi:isolate}.et-form-support-stack{position:relative;display:grid}.et-form-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}.et-form-support-content[data-active]{opacity:1}.et-form-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}.et-form-support-errors,.et-form-support-warnings{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;color:var(--et-theme-color-ink-solid, currentColor)}.et-form-support-errors{font-size:var(--et-form-support-error-font-size)}.et-form-support-warnings{font-size:var(--et-form-support-warning-font-size)}.et-form-support-hint{padding-block-start:4px;font-size:var(--et-form-support-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}.et-form-support-hint:empty{display:none}.et-form-support[data-can-animate]{transition:block-size var(--et-form-support-duration) ease}.et-form-support[data-can-animate] .et-form-support-content{transition:opacity var(--et-form-support-duration) ease}@starting-style{.et-form-support[data-can-animate] .et-form-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){.et-form-support{--et-form-support-duration: 1ms}}}\n"] }]
         }] });
 /** @internal */
 const mountFormSupportStyles = () => injectStyleManager().mount(FormSupportStylesComponent);
@@ -26825,13 +26893,14 @@ class FormSupportComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormSupportComponent, isStandalone: true, selector: "et-form-support", host: { properties: { "style.block-size.px": "support.supportHeight()" }, classAttribute: "et-form-support" }, 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: "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 }], ngImport: i0, template: "<div class=\"et-form-support-stack\">\n  @if (support.shouldRenderError()) {\n    <div\n      #errorContent\n      #errorAnimatable=\"etAnimatable\"\n      [id]=\"support.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-support-content et-form-support-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]=\"support.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-support-content et-form-support-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]=\"support.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-support-content et-form-support-hint\"\n      etAnimatable\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormSupportComponent, isStandalone: true, selector: "et-form-support", host: { properties: { "style.block-size.px": "support.supportHeight()", "attr.data-can-animate": "support.supportCanAnimate() || null" }, classAttribute: "et-form-support" }, 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: "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 }], ngImport: i0, template: "<div class=\"et-form-support-stack\">\n  @if (support.shouldRenderError()) {\n    <div\n      #errorContent\n      #errorAnimatable=\"etAnimatable\"\n      [id]=\"support.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-support-content et-form-support-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]=\"support.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-support-content et-form-support-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]=\"support.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-support-content et-form-support-hint\"\n      etAnimatable\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormSupportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-form-support', encapsulation: ViewEncapsulation.None, imports: [AnimatableDirective, FormErrorComponent, FormWarningComponent, ProvideColorDirective], host: {
                         class: 'et-form-support',
                         '[style.block-size.px]': 'support.supportHeight()',
+                        '[attr.data-can-animate]': 'support.supportCanAnimate() || null',
                     }, template: "<div class=\"et-form-support-stack\">\n  @if (support.shouldRenderError()) {\n    <div\n      #errorContent\n      #errorAnimatable=\"etAnimatable\"\n      [id]=\"support.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-support-content et-form-support-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]=\"support.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-support-content et-form-support-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]=\"support.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-support-content et-form-support-hint\"\n      etAnimatable\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContent: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { 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 }] }] } });
 
@@ -27573,7 +27642,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 [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.errorColorTheme()\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-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[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }], 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}}}\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,
@@ -27613,7 +27682,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 [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-row\">\n      <div class=\"et-form-field-support-stack\">\n        @if (support.shouldRenderError()) {\n          <div\n            #errorContent\n            #errorAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.errorId()\"\n            [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.errorActive() || null\"\n            [attr.data-direction]=\"support.errorDirection()\"\n            [attr.data-state]=\"support.errorState()\"\n            [etProvideColor]=\"support.errorColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-errors\"\n            etAnimatable\n          >\n            @for (error of support.visibleErrors(); track $index) {\n              <et-form-error [error]=\"error\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderWarning()) {\n          <div\n            #warningContent\n            #warningAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.warningId()\"\n            [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n            [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n            [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n            [attr.data-active]=\"support.warningActive() || null\"\n            [attr.data-direction]=\"support.warningDirection()\"\n            [attr.data-state]=\"support.warningState()\"\n            [etProvideColor]=\"support.warningColorTheme()\"\n            class=\"et-form-field-support-content et-form-field-warnings\"\n            etAnimatable\n          >\n            @for (warning of support.visibleWarnings(); track $index) {\n              <et-form-warning [warning]=\"warning\" />\n            }\n          </div>\n        }\n\n        @if (support.shouldRenderHint()) {\n          <div\n            #hintContent\n            #hintAnimatable=\"etAnimatable\"\n            [id]=\"formFieldDir.hintId()\"\n            [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n            [attr.data-active]=\"support.hintActive() || null\"\n            [attr.data-direction]=\"support.hintDirection()\"\n            [attr.data-state]=\"support.hintState()\"\n            class=\"et-form-field-support-content et-form-field-hint\"\n            etAnimatable\n          >\n            <ng-content select=\"et-hint\" />\n          </div>\n        }\n      </div>\n\n      <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n       error color even before the field shows an error. -->\n      <div\n        #counterContent\n        [etProvideColor]=\"support.errorColorTheme()\"\n        [hidden]=\"!formFieldDir.registeredCounter()\"\n        class=\"et-form-field-support-counter\"\n      >\n        <ng-content select=\"et-counter\" />\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-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[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"] }]
+                    }, template: "<div class=\"et-form-field-shell\">\n  <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n       the field they belong to. -->\n      @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n        <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n      }\n\n      <ng-content select=\"[etInputSuffix]\" />\n\n      <!-- After the consumer's own suffix, never instead of it. -->\n      @if (showBusySpinner()) {\n        <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n      }\n    </div>\n  </div>\n</div>\n\n<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"] }]
         }], 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');
@@ -27687,6 +27756,7 @@ class InputDirective extends TextFieldControlDirective {
                 value: this.displayValue,
                 placeholder: this.effectivePlaceholder,
                 type: this.type,
+                attributes: () => ({ autocomplete: this.autocomplete() || null }),
                 skip: () => this.nativeSyncSuppressed,
             });
         }
@@ -27862,16 +27932,45 @@ class NumberInputDirective extends TextFieldControlDirective {
             this.nativeControl.set(hostElement);
             this.focusTarget.set(hostElement);
             this.mirrorOntoNativeHost(hostElement, {
-                value: () => `${this.displayValue()}`,
                 placeholder: this.effectivePlaceholder,
                 attributes: () => ({
                     min: this.min()?.toString() ?? null,
                     max: this.max()?.toString() ?? null,
                     step: this.step()?.toString() ?? null,
                     inputmode: this.inputMode(),
+                    autocomplete: this.autocomplete() || null,
                 }),
             });
         }
+        effect(() => {
+            const element = this.nativeControl();
+            this.displayValue();
+            if (element)
+                untracked(() => this.writeNativeTextUnlessInSync(element));
+        });
+        effect(() => {
+            if (this.touched())
+                return;
+            untracked(() => this.clearParseError());
+        });
+    }
+    /**
+     * @internal Rewrites the native text in the model's own form - `2.0` becomes `2` - once the user
+     * leaves the input. Text that is not a number stays, so the parse error can name it.
+     */
+    normalizeNativeText() {
+        const element = this.nativeControl();
+        if (!element || this.mixed() || element.validity.badInput)
+            return;
+        const canonical = `${this.displayValue()}`;
+        if (element.value !== canonical)
+            element.value = canonical;
+    }
+    handleNativeBlur(event) {
+        if (event.target !== this.focusTarget())
+            return;
+        super.handleNativeBlur(event);
+        this.normalizeNativeText();
     }
     /**
      * Steps the value by `step` (an empty or mixed value starts from `0`), clamped to `min`/`max`.
@@ -27978,6 +28077,28 @@ class NumberInputDirective extends TextFieldControlDirective {
         this.value.set(Number.isNaN(parsed) ? null : parsed);
         this.parseError.set(inputElement.validity.badInput);
     }
+    /** Writing on every keystroke would turn `2.0` into `2`, eat the `-` of `-0.5` and move the caret. */
+    writeNativeTextUnlessInSync(element) {
+        if (this.nativeTextMatchesModel(element))
+            return;
+        element.value = `${this.displayValue()}`;
+    }
+    nativeTextMatchesModel(element) {
+        if (this.mixed())
+            return element.value === '';
+        const value = this.value();
+        if (value === null)
+            return element.value === '' || element.validity.badInput;
+        return element.value !== '' && element.valueAsNumber === value;
+    }
+    clearParseError() {
+        if (!this.parseError())
+            return;
+        const element = this.nativeControl();
+        if (element)
+            element.value = `${this.displayValue()}`;
+        this.parseError.set(false);
+    }
     exceedsDecimals(text) {
         const decimals = this.decimals();
         if (decimals === null)
@@ -28103,6 +28224,8 @@ class PasswordInputDirective extends TextFieldControlDirective {
             this.mirrorOntoNativeHost(hostElement, {
                 value: this.displayValue,
                 placeholder: this.effectivePlaceholder,
+                type: this.inputType,
+                attributes: () => ({ autocomplete: this.autocomplete() || null }),
             });
         }
     }
@@ -30010,79 +30133,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             type: Directive
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
 
-/**
- * Strictly parses `value` against a date-fns format string. Returns `null` for
- * empty input, leftover characters, or anything date-fns considers invalid.
- */
-const parseDateValue = (value, options) => {
-    const trimmed = value.trim();
-    if (!trimmed) {
-        return null;
-    }
-    const locale = options.locale ?? undefined;
-    const timeZone = options.timeZone ?? null;
-    const parsed = parse(trimmed, options.format, options.referenceDate ?? new Date(), {
-        locale,
-        in: timeZone === null ? undefined : tz(timeZone),
-    });
-    if (!isValid(parsed)) {
-        return null;
-    }
-    return timeZone === null ? parsed : new Date(parsed.getTime());
-};
-/** Formats a `Date` with a date-fns format string. Invalid dates yield `null`. */
-const formatDateValue = (date, options) => {
-    if (!isValid(date)) {
-        return null;
-    }
-    const locale = options.locale;
-    return format(date, options.format, locale ? { locale } : undefined);
-};
-
-/** The `displayFormat` a precision implies, when the consumer has not named one. */
-const displayFormatForPrecision = (precision, locale) => {
-    if (precision === 'day') {
-        return 'P';
-    }
-    if (precision === 'year') {
-        return 'yyyy';
-    }
-    return monthYearFormat(locale?.formatLong?.date({ width: 'short' }) ?? 'MM/dd/yyyy');
-};
-const monthYearFormat = (shortDatePattern) => {
-    const stripped = shortDatePattern.replace(/(?:[^a-zA-Z']+d+|d+[^a-zA-Z']+)/, '');
-    if (stripped === shortDatePattern || /d/.test(stripped)) {
-        return 'MM/yyyy';
-    }
-    return widenYearToken(stripped);
-};
-/** `y` / `yy` / `yyy` → `yyyy`, so the pattern is fixed-width and a mask can be derived from it. */
-const widenYearToken = (pattern) => pattern.replace(/y+/, 'yyyy');
-
-const EXAMPLE_DATE = /* @__PURE__ */ new Date(2026, 6, 16, 21, 30, 0);
-/**
- * Dev mode only: warns once per control when a non-empty wire value does not parse against the
- * `valueFormat` in effect, since the field then renders blank. Call in an injection context.
- */
-const warnOnUnparsedValue = (options) => {
-    if (!ngDevMode)
-        return;
-    let warned = false;
-    effect(() => {
-        if (warned)
-            return;
-        const miss = options.readings().find((reading) => !!reading.value?.trim() && reading.parsed === null);
-        if (!miss)
-            return;
-        warned = true;
-        const format = options.format();
-        const example = formatDateValue(EXAMPLE_DATE, { format, locale: options.locale() });
-        console.warn(`[${options.selector}] The value "${miss.value}" does not match the valueFormat "${format}", so the field ` +
-            `renders blank. A matching value looks like "${example}". Set valueFormat on the control or ` +
-            `${options.formatProvider}() for the app.`);
-    });
-};
-
 /** date-fns' own pre-pass: the `P`/`p` locale formats are expanded before the format is tokenized. */
 const LONG_FORMAT_PATTERN = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
 /** date-fns' formatting tokenizer. */
@@ -30157,13 +30207,15 @@ const kindOf = (token) => {
     // `t`/`T` are whole epoch timestamps, and an unknown letter is date-fns' problem
     return /[a-zA-Z]/.test(first) ? 'unsplittable' : 'literal';
 };
+/** The format's date-fns tokens, with the `P`/`p` locale formats expanded. */
+const formatTokens = (format, locale) => expandLongFormats(format, locale ?? enUS).match(TOKEN_PATTERN) ?? [];
 /**
  * Splits a combined date & time format into the span carrying the time and the date format around
  * it. `null` when the format has no time half, no date half, or interleaves the two.
  */
 const splitDateTimeFormat = (format, locale) => {
-    const tokens = expandLongFormats(format, locale ?? enUS).match(TOKEN_PATTERN);
-    if (tokens === null) {
+    const tokens = formatTokens(format, locale);
+    if (tokens.length === 0) {
         return null;
     }
     const kinds = tokens.map(kindOf);
@@ -30182,6 +30234,88 @@ const splitDateTimeFormat = (format, locale) => {
     };
 };
 
+// date-fns' `y`/`yyyy` parsers take one to four digits as the literal year, so `1.2.26` would read as 0026
+const isShortYear = (parsed, { format, locale }) => {
+    if (parsed.getFullYear() >= 1000) {
+        return false;
+    }
+    const yearTokens = formatTokens(format, locale ?? null).filter((token) => token[0] === 'y');
+    return yearTokens.length > 0 && !yearTokens.includes('yy');
+};
+/**
+ * Strictly parses `value` against a date-fns format string. Returns `null` for
+ * empty input, leftover characters, a year of fewer than four digits where the format
+ * asks for a full one, or anything date-fns considers invalid.
+ */
+const parseDateValue = (value, options) => {
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const locale = options.locale ?? undefined;
+    const timeZone = options.timeZone ?? null;
+    const parsed = parse(trimmed, options.format, options.referenceDate ?? new Date(), {
+        locale,
+        in: timeZone === null ? undefined : tz(timeZone),
+    });
+    if (!isValid(parsed) || isShortYear(parsed, options)) {
+        return null;
+    }
+    return timeZone === null ? parsed : new Date(parsed.getTime());
+};
+/** Formats a `Date` with a date-fns format string. Invalid dates yield `null`. */
+const formatDateValue = (date, options) => {
+    if (!isValid(date)) {
+        return null;
+    }
+    const locale = options.locale;
+    return format(date, options.format, locale ? { locale } : undefined);
+};
+
+/** The `displayFormat` a precision implies, when the consumer has not named one. */
+const displayFormatForPrecision = (precision, locale) => {
+    if (precision === 'day') {
+        return 'P';
+    }
+    if (precision === 'year') {
+        return 'yyyy';
+    }
+    return monthYearFormat(locale?.formatLong?.date({ width: 'short' }) ?? 'MM/dd/yyyy');
+};
+const monthYearFormat = (shortDatePattern) => {
+    const stripped = shortDatePattern.replace(/(?:[^a-zA-Z']+d+|d+[^a-zA-Z']+)/, '');
+    if (stripped === shortDatePattern || /d/.test(stripped)) {
+        return 'MM/yyyy';
+    }
+    return widenYearToken(stripped);
+};
+/** `y` / `yy` / `yyy` → `yyyy`, so the pattern is fixed-width and a mask can be derived from it. */
+const widenYearToken = (pattern) => pattern.replace(/y+/, 'yyyy');
+
+const EXAMPLE_DATE = /* @__PURE__ */ new Date(2026, 6, 16, 21, 30, 0);
+/**
+ * Dev mode only: warns once per control when a non-empty wire value does not parse against the
+ * `valueFormat` in effect, since the field then renders blank. Call in an injection context.
+ */
+const warnOnUnparsedValue = (options) => {
+    if (!ngDevMode)
+        return;
+    let warned = false;
+    effect(() => {
+        if (warned)
+            return;
+        const miss = options.readings().find((reading) => !!reading.value?.trim() && reading.parsed === null);
+        if (!miss)
+            return;
+        warned = true;
+        const format = options.format();
+        const example = formatDateValue(EXAMPLE_DATE, { format, locale: options.locale() });
+        console.warn(`[${options.selector}] The value "${miss.value}" does not match the valueFormat "${format}", so the field ` +
+            `renders blank. A matching value looks like "${example}". Set valueFormat on the control or ` +
+            `${options.formatProvider}() for the app.`);
+    });
+};
+
 /** The day of `day` carrying the time of day of `time`. */
 const withTimeOfDay = (day, time) => setSeconds(setMinutes(setHours(startOfDay(day), time.getHours()), time.getMinutes()), time.getSeconds());
 
@@ -31155,11 +31289,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }] } });
 
 /** The preset state a range input shares with its styled component. Call in an injection context. */
-const createDateRangePresets = ({ host, presets, labels, normalize }) => {
+const createDateRangePresets = ({ host, presets, labels, firstDayOfWeek, normalize, }) => {
     const resolveInstants = (preset) => {
         const timeZone = host.effectiveTimeZone();
         const now = timeZone === null ? new Date() : zonedProxy(new Date(), timeZone);
-        const range = preset.resolve(now, { locale: host.effectiveLocale() });
+        const locale = host.effectiveLocale();
+        const range = preset.resolve(now, {
+            locale,
+            weekStartsOn: firstDayOfWeek() ?? locale?.options?.weekStartsOn ?? 1,
+        });
         return {
             start: reinterpretInZone(normalize(range.start), timeZone),
             end: reinterpretInZone(normalize(range.end), timeZone),
@@ -31292,6 +31430,7 @@ class DateRangeInputDirective extends DateRangePickerInputDirective {
             host: this,
             presets: this.presets,
             labels: this.dateTimeLabels,
+            firstDayOfWeek: this.firstDayOfWeek,
             normalize: (date) => startOfCalendarUnit(date, this.precision()),
         });
         /** The format in effect: this instance's `displayFormat`, else the one `precision` implies. */
@@ -31514,7 +31653,10 @@ const dayRange = (start, end) => ({
     start: startOfDay(start),
     end: endOfDayMinute(end),
 });
-const weekOptions = ({ locale }) => (locale ? { locale } : undefined);
+const weekOptions = ({ locale, weekStartsOn }) => ({
+    locale: locale ?? undefined,
+    weekStartsOn: weekStartsOn ?? locale?.options?.weekStartsOn ?? 1,
+});
 const createPreset = ({ defaultLabel, resolve, options }) => ({
     label: options.label ?? defaultLabel,
     resolve,
@@ -31539,7 +31681,7 @@ const nextDaysPreset = (count, options = {}) => createPreset({
     resolve: (now) => dayRange(addDays(now, 1), addDays(now, Math.max(1, count))),
     options,
 });
-/** The current week, starting on the locale's first day of the week. */
+/** The current week, starting on the first day of the control's calendar rows. */
 const thisWeekPreset = (options = {}) => createPreset({
     defaultLabel: (labels) => labels.presetThisWeek,
     resolve: (now, context) => dayRange(startOfWeek(now, weekOptions(context)), endOfWeek(now, weekOptions(context))),
@@ -31579,6 +31721,14 @@ const DATE_TIME_INPUT_ERROR_CODES = {
 };
 
 const secondsOfDay$1 = (date) => date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
+/**
+ * The start of `date`'s day, or of the same weekday a week earlier when the runtime's clocks change on it,
+ * so every wall-clock time exists on the returned day.
+ */
+const clockSafeDay = (date) => {
+    const day = startOfDay(date);
+    return day.getTimezoneOffset() === endOfDay(day).getTimezoneOffset() ? day : subWeeks(day, 1);
+};
 const setTimeOfDay = (day, candidate) => setSeconds(setMinutes(setHours(day, candidate.hour), candidate.minute), candidate.second);
 const isTimeSelectable = (candidate, options) => {
     const { min, max, filter, day } = options;
@@ -31772,6 +31922,8 @@ class TimePickerDirective {
         this.defaultFormat = injectTimeFormat();
         this.defaultLocale = injectDateLocale();
         this.hostElement = injectHostElement();
+        /** Blocks every change: a press, a drag and the keys leave the time alone. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Whether the ring holds one time (`value`) or a range (`rangeValue`). */
         this.mode = input('single', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
@@ -31849,9 +32001,11 @@ class TimePickerDirective {
             return spec.hourCycle === 12 ? `h:mm${spec.showSeconds ? ':ss' : ''} a` : `HH:mm${spec.showSeconds ? ':ss' : ''}`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sideFormat" }] : /* istanbul ignore next */ []));
-        this.startRingDay = computed(() => startOfDay(this.ringValue('start') ?? this.now()).getTime(), /* @ts-ignore */
+        this.emptyRingDay = computed(() => clockSafeDay(this.now()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyRingDay" }] : /* istanbul ignore next */ []));
+        this.startRingDay = computed(() => startOfDay(this.ringValue('start') ?? this.emptyRingDay()).getTime(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "startRingDay" }] : /* istanbul ignore next */ []));
-        this.endRingDay = computed(() => startOfDay(this.ringValue('end') ?? this.now()).getTime(), /* @ts-ignore */
+        this.endRingDay = computed(() => startOfDay(this.ringValue('end') ?? this.emptyRingDay()).getTime(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "endRingDay" }] : /* istanbul ignore next */ []));
         this.sameDayRange = computed(() => {
             const days = this.rangeDays();
@@ -31898,11 +32052,11 @@ class TimePickerDirective {
      * range hands the active side on to the end. Returns whether it handed on.
      */
     commitRingMinute(side, minute) {
-        if (!isStopOpen(this.ringStops()[side], minute)) {
+        if (this.disabled() || !isStopOpen(this.ringStops()[side], minute)) {
             return false;
         }
         const current = this.ringValue(side);
-        const next = setMilliseconds(setTimeOfDay(current ?? startOfDay(this.now()), {
+        const next = setMilliseconds(setTimeOfDay(current ?? this.emptyRingDay(), {
             hour: Math.floor(minute / 60),
             minute: minute % 60,
             second: 0,
@@ -31941,7 +32095,7 @@ class TimePickerDirective {
         return createTimeRingStops(this.minuteStep(), other === null ? isOpen : (minute) => isOpen(minute) && (side === 'end' ? minute >= other : minute <= other));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerDirective, isStandalone: true, selector: "[etTimePicker]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timeFilter: { classPropertyName: "timeFilter", publicName: "timeFilter", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, activeSide: { classPropertyName: "activeSide", publicName: "activeSide", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, rangeDays: { classPropertyName: "rangeDays", publicName: "rangeDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", activeSide: "activeSideChange", timeSelect: "timeSelect", rangeHandOff: "rangeHandOff" }, host: { listeners: { "focusin": "refreshNow($event)" } }, exportAs: ["etTimePicker"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerDirective, isStandalone: true, selector: "[etTimePicker]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timeFilter: { classPropertyName: "timeFilter", publicName: "timeFilter", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, activeSide: { classPropertyName: "activeSide", publicName: "activeSide", isSignal: true, isRequired: false, transformFunction: null }, day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, rangeDays: { classPropertyName: "rangeDays", publicName: "rangeDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", activeSide: "activeSideChange", timeSelect: "timeSelect", rangeHandOff: "rangeHandOff" }, host: { listeners: { "focusin": "refreshNow($event)" } }, exportAs: ["etTimePicker"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerDirective, decorators: [{
             type: Directive,
@@ -31952,7 +32106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '(focusin)': 'refreshNow($event)',
                     },
                 }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], timeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFilter", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], activeSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSide", required: false }] }, { type: i0.Output, args: ["activeSideChange"] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], rangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeDays", required: false }] }], timeSelect: [{ type: i0.Output, args: ["timeSelect"] }], rangeHandOff: [{ type: i0.Output, args: ["rangeHandOff"] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], timeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFilter", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], activeSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeSide", required: false }] }, { type: i0.Output, args: ["activeSideChange"] }], day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], rangeDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeDays", required: false }] }], timeSelect: [{ type: i0.Output, args: ["timeSelect"] }], rangeHandOff: [{ type: i0.Output, args: ["rangeHandOff"] }] } });
 
 // codes 3020-3029 (inside the shared date & time inputs block 3000-3099)
 const TIME_PICKER_ERROR_CODES = {
@@ -32011,7 +32165,7 @@ class TimePickerRingDirective {
     }
     handlePointerDown(event) {
         const picker = this.picker;
-        if (event.button !== 0 || this.draggingSide() !== null) {
+        if (picker.disabled() || event.button !== 0 || this.draggingSide() !== null) {
             return;
         }
         const pressMinute = this.minuteAt({ x: event.clientX, y: event.clientY }, { ignoreCentre: true });
@@ -32223,7 +32377,7 @@ class TimePickerRingHandleDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerRingHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerRingHandleDirective, isStandalone: true, selector: "[etTimePickerRingHandle]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "slider", "tabindex": "0", "aria-valuemin": "0", "aria-valuemax": "1439" }, listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus()", "blur": "pointerFocused.set(false)" }, properties: { "attr.aria-valuenow": "minute()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "resolvedLabel()", "attr.data-side": "side()", "attr.data-empty": "minute() === null || null", "attr.data-active": "active() || null", "attr.data-dragging": "dragging() || null", "attr.data-pointer-focused": "pointerFocused() || null" } }, exportAs: ["etTimePickerRingHandle"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: TimePickerRingHandleDirective, isStandalone: true, selector: "[etTimePickerRingHandle]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "slider", "aria-valuemin": "0", "aria-valuemax": "1439" }, listeners: { "keydown": "handleKeydown($event)", "focus": "handleFocus()", "blur": "pointerFocused.set(false)" }, properties: { "attr.tabindex": "picker.disabled() ? -1 : 0", "attr.aria-disabled": "picker.disabled() || null", "attr.data-disabled": "picker.disabled() || null", "attr.aria-valuenow": "minute()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "resolvedLabel()", "attr.data-side": "side()", "attr.data-empty": "minute() === null || null", "attr.data-active": "active() || null", "attr.data-dragging": "dragging() || null", "attr.data-pointer-focused": "pointerFocused() || null" } }, exportAs: ["etTimePickerRingHandle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerRingHandleDirective, decorators: [{
             type: Directive,
@@ -32232,7 +32386,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     exportAs: 'etTimePickerRingHandle',
                     host: {
                         role: 'slider',
-                        tabindex: '0',
+                        '[attr.tabindex]': 'picker.disabled() ? -1 : 0',
+                        '[attr.aria-disabled]': 'picker.disabled() || null',
+                        '[attr.data-disabled]': 'picker.disabled() || null',
                         'aria-valuemin': '0',
                         'aria-valuemax': '1439',
                         '[attr.aria-valuenow]': 'minute()',
@@ -32387,7 +32543,7 @@ class TimePickerComponent {
         return minutes === 0 ? hoursText : `${hoursText} ${minutesText}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { properties: { "attr.data-mode": "timePicker.mode()" }, classAttribute: "et-time-picker" }, viewQueries: [{ propertyName: "ring", first: true, predicate: TimePickerRingDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TimePickerDirective, inputs: ["mode", "mode", "format", "format", "locale", "locale", "minuteStep", "minuteStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "startLabel", "startLabel", "endLabel", "endLabel", "value", "value", "rangeValue", "rangeValue", "activeSide", "activeSide", "day", "day", "rangeDays", "rangeDays"], outputs: ["valueChange", "valueChange", "rangeValueChange", "rangeValueChange", "activeSideChange", "activeSideChange", "timeSelect", "timeSelect", "rangeHandOff", "rangeHandOff"] }], ngImport: i0, template: "@let readoutState = readout();\n\n<div class=\"et-time-picker-ring\" etTimePickerRing>\n  <svg class=\"et-time-picker-ring-graphic\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 280 280\">\n    @let trackState = track();\n\n    @if (trackState.allBlocked) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-blocked\" />\n    }\n    @for (path of trackState.blocked; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-blocked\" />\n    }\n    @if (trackState.full) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-track\" />\n    }\n    @for (path of trackState.open; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-track\" />\n    }\n    @if (arc(); as arcPath) {\n      <path [attr.d]=\"arcPath\" class=\"et-time-picker-arc\" />\n    }\n\n    <g class=\"et-time-picker-ticks\">\n      @for (tick of ticks; track tick.hour) {\n        <line [attr.x1]=\"tick.x1\" [attr.y1]=\"tick.y1\" [attr.x2]=\"tick.x2\" [attr.y2]=\"tick.y2\" />\n      }\n    </g>\n\n    <g class=\"et-time-picker-labels\">\n      @for (label of hourLabels(); track label.hour) {\n        <text [attr.x]=\"label.x\" [attr.y]=\"label.y\">{{ label.text }}</text>\n      }\n    </g>\n\n    @if (twelveHour()) {\n      <path\n        [attr.transform]=\"'translate(' + MOON.x + ' ' + MOON.y + ')'\"\n        class=\"et-time-picker-mark\"\n        d=\"M8.5 0.8 A6 6 0 1 0 11.2 8.6 A4.6 4.6 0 0 1 8.5 0.8 Z\"\n      />\n      <g class=\"et-time-picker-mark\">\n        <circle [attr.cx]=\"sun.x\" [attr.cy]=\"sun.y\" r=\"3.2\" />\n        @for (ray of sunRays; track ray.index) {\n          <line [attr.x1]=\"ray.x1\" [attr.y1]=\"ray.y1\" [attr.x2]=\"ray.x2\" [attr.y2]=\"ray.y2\" />\n        }\n      </g>\n    }\n\n    <text\n      [attr.x]=\"CENTER\"\n      [attr.y]=\"readoutState.note === null ? CENTER : CENTER - (readoutState.kind === 'duration' ? 2 : 4)\"\n      [attr.data-kind]=\"readoutState.kind\"\n      [attr.data-long]=\"readoutState.main.length > 5 || null\"\n      [attr.data-longer]=\"readoutState.main.length > 8 || null\"\n      class=\"et-time-picker-readout\"\n    >\n      {{ readoutState.main }}\n    </text>\n    @if (readoutState.note !== null) {\n      <text [attr.x]=\"CENTER\" [attr.y]=\"CENTER + 20\" class=\"et-time-picker-note\">{{ readoutState.note }}</text>\n    }\n  </svg>\n\n  <div\n    #startHandle=\"etTimePickerRingHandle\"\n    [style.--_et-time-picker-handle-angle]=\"(startHandle.angle() ?? 0) + 'deg'\"\n    class=\"et-time-picker-handle\"\n    etTimePickerRingHandle\n    side=\"start\"\n  ></div>\n\n  @if (timePicker.mode() === 'range') {\n    <div\n      #endHandle=\"etTimePickerRingHandle\"\n      [style.--_et-time-picker-handle-angle]=\"(endHandle.angle() ?? 0) + 'deg'\"\n      class=\"et-time-picker-handle\"\n      etTimePickerRingHandle\n      side=\"end\"\n    ></div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 280px;}@property --et-time-picker-handle-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-ring{position:relative;flex:none;inline-size:var(--et-time-picker-ring-size);block-size:var(--et-time-picker-ring-size);-webkit-tap-highlight-color:transparent}.et-time-picker .et-time-picker-ring-graphic{display:block;inline-size:100%;block-size:100%;overflow:visible;font-family:inherit}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{fill:none;stroke-width:28;stroke-linecap:butt}.et-time-picker .et-time-picker-track{stroke:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent)}.et-time-picker .et-time-picker-arc{stroke:var(--et-theme-color-primary-solid, currentColor);stroke-linecap:round;opacity:.45}.et-time-picker .et-time-picker-blocked{fill:none;stroke:var(--et-surface-color-subtle-solid, currentColor);stroke-width:1;stroke-dasharray:2 5}.et-time-picker .et-time-picker-ticks line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1}.et-time-picker .et-time-picker-labels text{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-mark{fill:var(--et-surface-color-muted-solid, currentColor)}.et-time-picker .et-time-picker-mark line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1.2;stroke-linecap:round}.et-time-picker .et-time-picker-readout{fill:var(--et-surface-color-solid, currentColor);font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-readout:where([data-long]){font-size:22px}.et-time-picker .et-time-picker-readout:where([data-longer]){font-size:16px}.et-time-picker .et-time-picker-readout:where([data-kind=duration]){font-size:20px}.et-time-picker .et-time-picker-note{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central}.et-time-picker .et-time-picker-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;box-sizing:border-box;inline-size:var(--et-time-picker-handle-size);block-size:var(--et-time-picker-handle-size);margin-block-start:calc(var(--et-time-picker-handle-size) / -2);margin-inline-start:calc(var(--et-time-picker-handle-size) / -2);border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:50%;background:var(--et-surface-background-solid, Canvas);transform:rotate(var(--_et-time-picker-handle-angle, 0deg)) translateY(calc(var(--et-time-picker-ring-size) * -.4)) rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));cursor:grab;outline:none;touch-action:none}.et-time-picker .et-time-picker-handle:where([data-empty]){opacity:0;pointer-events:none}.et-time-picker .et-time-picker-handle:where([data-dragging]){cursor:grabbing}.et-time-picker .et-time-picker-handle:focus-visible:not([data-pointer-focused]){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-time-picker:where([data-mode=single]) .et-time-picker-handle,.et-time-picker .et-time-picker-handle:where([data-active]){border:3px solid var(--et-surface-background-solid, Canvas);background:var(--et-theme-color-primary-solid, currentColor)}.et-time-picker:where([data-mode=single]) .et-time-picker-handle{box-shadow:0 0 0 calc(var(--et-time-picker-handle-size) * .35) color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 22%,transparent)}}\n"], dependencies: [{ kind: "directive", type: TimePickerRingDirective, selector: "[etTimePickerRing]", exportAs: ["etTimePickerRing"] }, { kind: "directive", type: TimePickerRingHandleDirective, selector: "[etTimePickerRingHandle]", inputs: ["side", "label"], exportAs: ["etTimePickerRingHandle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimePickerComponent, isStandalone: true, selector: "et-time-picker", host: { properties: { "attr.data-mode": "timePicker.mode()", "attr.data-disabled": "timePicker.disabled() || null" }, classAttribute: "et-time-picker" }, viewQueries: [{ propertyName: "ring", first: true, predicate: TimePickerRingDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: TimePickerDirective, inputs: ["mode", "mode", "format", "format", "locale", "locale", "minuteStep", "minuteStep", "min", "min", "max", "max", "timeFilter", "timeFilter", "startLabel", "startLabel", "endLabel", "endLabel", "value", "value", "rangeValue", "rangeValue", "activeSide", "activeSide", "day", "day", "rangeDays", "rangeDays", "disabled", "disabled"], outputs: ["valueChange", "valueChange", "rangeValueChange", "rangeValueChange", "activeSideChange", "activeSideChange", "timeSelect", "timeSelect", "rangeHandOff", "rangeHandOff"] }], ngImport: i0, template: "@let readoutState = readout();\n\n<div class=\"et-time-picker-ring\" etTimePickerRing>\n  <svg class=\"et-time-picker-ring-graphic\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 280 280\">\n    @let trackState = track();\n\n    @if (trackState.allBlocked) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-blocked\" />\n    }\n    @for (path of trackState.blocked; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-blocked\" />\n    }\n    @if (trackState.full) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-track\" />\n    }\n    @for (path of trackState.open; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-track\" />\n    }\n    @if (arc(); as arcPath) {\n      <path [attr.d]=\"arcPath\" class=\"et-time-picker-arc\" />\n    }\n\n    <g class=\"et-time-picker-ticks\">\n      @for (tick of ticks; track tick.hour) {\n        <line [attr.x1]=\"tick.x1\" [attr.y1]=\"tick.y1\" [attr.x2]=\"tick.x2\" [attr.y2]=\"tick.y2\" />\n      }\n    </g>\n\n    <g class=\"et-time-picker-labels\">\n      @for (label of hourLabels(); track label.hour) {\n        <text [attr.x]=\"label.x\" [attr.y]=\"label.y\">{{ label.text }}</text>\n      }\n    </g>\n\n    @if (twelveHour()) {\n      <path\n        [attr.transform]=\"'translate(' + MOON.x + ' ' + MOON.y + ')'\"\n        class=\"et-time-picker-mark\"\n        d=\"M8.5 0.8 A6 6 0 1 0 11.2 8.6 A4.6 4.6 0 0 1 8.5 0.8 Z\"\n      />\n      <g class=\"et-time-picker-mark\">\n        <circle [attr.cx]=\"sun.x\" [attr.cy]=\"sun.y\" r=\"3.2\" />\n        @for (ray of sunRays; track ray.index) {\n          <line [attr.x1]=\"ray.x1\" [attr.y1]=\"ray.y1\" [attr.x2]=\"ray.x2\" [attr.y2]=\"ray.y2\" />\n        }\n      </g>\n    }\n\n    <text\n      [attr.x]=\"CENTER\"\n      [attr.y]=\"readoutState.note === null ? CENTER : CENTER - (readoutState.kind === 'duration' ? 2 : 4)\"\n      [attr.data-kind]=\"readoutState.kind\"\n      [attr.data-long]=\"readoutState.main.length > 5 || null\"\n      [attr.data-longer]=\"readoutState.main.length > 8 || null\"\n      class=\"et-time-picker-readout\"\n    >\n      {{ readoutState.main }}\n    </text>\n    @if (readoutState.note !== null) {\n      <text [attr.x]=\"CENTER\" [attr.y]=\"CENTER + 20\" class=\"et-time-picker-note\">{{ readoutState.note }}</text>\n    }\n  </svg>\n\n  <div\n    #startHandle=\"etTimePickerRingHandle\"\n    [style.--_et-time-picker-handle-angle]=\"(startHandle.angle() ?? 0) + 'deg'\"\n    class=\"et-time-picker-handle\"\n    etTimePickerRingHandle\n    side=\"start\"\n  ></div>\n\n  @if (timePicker.mode() === 'range') {\n    <div\n      #endHandle=\"etTimePickerRingHandle\"\n      [style.--_et-time-picker-handle-angle]=\"(endHandle.angle() ?? 0) + 'deg'\"\n      class=\"et-time-picker-handle\"\n      etTimePickerRingHandle\n      side=\"end\"\n    ></div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 280px;}@property --et-time-picker-handle-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}.et-time-picker{display:inline-flex;vertical-align:top;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:opacity .12s ease}.et-time-picker .et-time-picker-ring{position:relative;flex:none;inline-size:var(--et-time-picker-ring-size);block-size:var(--et-time-picker-ring-size);-webkit-tap-highlight-color:transparent}.et-time-picker .et-time-picker-ring-graphic{display:block;inline-size:100%;block-size:100%;overflow:visible;font-family:inherit}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{fill:none;stroke-width:28;stroke-linecap:butt}.et-time-picker .et-time-picker-track{stroke:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent)}.et-time-picker .et-time-picker-arc{stroke:var(--et-theme-color-primary-solid, currentColor);stroke-linecap:round;opacity:.45}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{cursor:pointer}.et-time-picker .et-time-picker-blocked{fill:none;stroke:var(--et-surface-color-subtle-solid, currentColor);stroke-width:1;stroke-dasharray:2 5}.et-time-picker .et-time-picker-ticks line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1}.et-time-picker .et-time-picker-labels text{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-mark{fill:var(--et-surface-color-muted-solid, currentColor)}.et-time-picker .et-time-picker-mark line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1.2;stroke-linecap:round}.et-time-picker .et-time-picker-readout{fill:var(--et-surface-color-solid, currentColor);font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-readout:where([data-long]){font-size:22px}.et-time-picker .et-time-picker-readout:where([data-longer]){font-size:16px}.et-time-picker .et-time-picker-readout:where([data-kind=duration]){font-size:20px}.et-time-picker .et-time-picker-note{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central}.et-time-picker .et-time-picker-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;box-sizing:border-box;inline-size:var(--et-time-picker-handle-size);block-size:var(--et-time-picker-handle-size);margin-block-start:calc(var(--et-time-picker-handle-size) / -2);margin-inline-start:calc(var(--et-time-picker-handle-size) / -2);border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:50%;background:var(--et-surface-background-solid, Canvas);transform:rotate(var(--_et-time-picker-handle-angle, 0deg)) translateY(calc(var(--et-time-picker-ring-size) * -.4)) rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));--_et-time-picker-halo-shadow: 0 0 0 calc(var(--et-time-picker-handle-size) * var(--_et-time-picker-halo)) color-mix( in srgb, var(--et-theme-color-primary-solid, currentColor) var(--_et-time-picker-halo-opacity, 16%), transparent );box-shadow:var(--_et-time-picker-halo-shadow, none);transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;cursor:grab;outline:none;touch-action:none}.et-time-picker .et-time-picker-handle:where([data-empty]){opacity:0;pointer-events:none}.et-time-picker .et-time-picker-handle:where([data-dragging]){cursor:grabbing}.et-time-picker .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .3}.et-time-picker .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker .et-time-picker-handle:focus-visible:not([data-pointer-focused]){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-time-picker:where([data-mode=single]) .et-time-picker-handle,.et-time-picker .et-time-picker-handle:where([data-active]){border:3px solid var(--et-surface-background-solid, Canvas);background:var(--et-theme-color-primary-solid, currentColor)}.et-time-picker:where([data-mode=single]) .et-time-picker-handle{--_et-time-picker-halo: .35;--_et-time-picker-halo-opacity: 22%}.et-time-picker[data-mode=range] .et-time-picker-handle:hover:not([data-disabled],[data-dragging],[data-active]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,var(--et-surface-background-solid, Canvas))}.et-time-picker[data-mode=single] .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker[data-mode=single] .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .65;--_et-time-picker-halo-opacity: 32%}.et-time-picker:where([data-disabled]){opacity:.4}.et-time-picker:where([data-disabled]) .et-time-picker-track,.et-time-picker:where([data-disabled]) .et-time-picker-arc,.et-time-picker:where([data-disabled]) .et-time-picker-handle{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.et-time-picker,.et-time-picker .et-time-picker-handle{transition:none}}}\n"], dependencies: [{ kind: "directive", type: TimePickerRingDirective, selector: "[etTimePickerRing]", exportAs: ["etTimePickerRing"] }, { kind: "directive", type: TimePickerRingHandleDirective, selector: "[etTimePickerRingHandle]", inputs: ["side", "label"], exportAs: ["etTimePickerRingHandle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -32409,13 +32565,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                                 'activeSide',
                                 'day',
                                 'rangeDays',
+                                'disabled',
                             ],
                             outputs: ['valueChange', 'rangeValueChange', 'activeSideChange', 'timeSelect', 'rangeHandOff'],
                         },
                     ], host: {
                         class: 'et-time-picker',
                         '[attr.data-mode]': 'timePicker.mode()',
-                    }, template: "@let readoutState = readout();\n\n<div class=\"et-time-picker-ring\" etTimePickerRing>\n  <svg class=\"et-time-picker-ring-graphic\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 280 280\">\n    @let trackState = track();\n\n    @if (trackState.allBlocked) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-blocked\" />\n    }\n    @for (path of trackState.blocked; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-blocked\" />\n    }\n    @if (trackState.full) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-track\" />\n    }\n    @for (path of trackState.open; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-track\" />\n    }\n    @if (arc(); as arcPath) {\n      <path [attr.d]=\"arcPath\" class=\"et-time-picker-arc\" />\n    }\n\n    <g class=\"et-time-picker-ticks\">\n      @for (tick of ticks; track tick.hour) {\n        <line [attr.x1]=\"tick.x1\" [attr.y1]=\"tick.y1\" [attr.x2]=\"tick.x2\" [attr.y2]=\"tick.y2\" />\n      }\n    </g>\n\n    <g class=\"et-time-picker-labels\">\n      @for (label of hourLabels(); track label.hour) {\n        <text [attr.x]=\"label.x\" [attr.y]=\"label.y\">{{ label.text }}</text>\n      }\n    </g>\n\n    @if (twelveHour()) {\n      <path\n        [attr.transform]=\"'translate(' + MOON.x + ' ' + MOON.y + ')'\"\n        class=\"et-time-picker-mark\"\n        d=\"M8.5 0.8 A6 6 0 1 0 11.2 8.6 A4.6 4.6 0 0 1 8.5 0.8 Z\"\n      />\n      <g class=\"et-time-picker-mark\">\n        <circle [attr.cx]=\"sun.x\" [attr.cy]=\"sun.y\" r=\"3.2\" />\n        @for (ray of sunRays; track ray.index) {\n          <line [attr.x1]=\"ray.x1\" [attr.y1]=\"ray.y1\" [attr.x2]=\"ray.x2\" [attr.y2]=\"ray.y2\" />\n        }\n      </g>\n    }\n\n    <text\n      [attr.x]=\"CENTER\"\n      [attr.y]=\"readoutState.note === null ? CENTER : CENTER - (readoutState.kind === 'duration' ? 2 : 4)\"\n      [attr.data-kind]=\"readoutState.kind\"\n      [attr.data-long]=\"readoutState.main.length > 5 || null\"\n      [attr.data-longer]=\"readoutState.main.length > 8 || null\"\n      class=\"et-time-picker-readout\"\n    >\n      {{ readoutState.main }}\n    </text>\n    @if (readoutState.note !== null) {\n      <text [attr.x]=\"CENTER\" [attr.y]=\"CENTER + 20\" class=\"et-time-picker-note\">{{ readoutState.note }}</text>\n    }\n  </svg>\n\n  <div\n    #startHandle=\"etTimePickerRingHandle\"\n    [style.--_et-time-picker-handle-angle]=\"(startHandle.angle() ?? 0) + 'deg'\"\n    class=\"et-time-picker-handle\"\n    etTimePickerRingHandle\n    side=\"start\"\n  ></div>\n\n  @if (timePicker.mode() === 'range') {\n    <div\n      #endHandle=\"etTimePickerRingHandle\"\n      [style.--_et-time-picker-handle-angle]=\"(endHandle.angle() ?? 0) + 'deg'\"\n      class=\"et-time-picker-handle\"\n      etTimePickerRingHandle\n      side=\"end\"\n    ></div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 280px;}@property --et-time-picker-handle-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}.et-time-picker{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.et-time-picker .et-time-picker-ring{position:relative;flex:none;inline-size:var(--et-time-picker-ring-size);block-size:var(--et-time-picker-ring-size);-webkit-tap-highlight-color:transparent}.et-time-picker .et-time-picker-ring-graphic{display:block;inline-size:100%;block-size:100%;overflow:visible;font-family:inherit}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{fill:none;stroke-width:28;stroke-linecap:butt}.et-time-picker .et-time-picker-track{stroke:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent)}.et-time-picker .et-time-picker-arc{stroke:var(--et-theme-color-primary-solid, currentColor);stroke-linecap:round;opacity:.45}.et-time-picker .et-time-picker-blocked{fill:none;stroke:var(--et-surface-color-subtle-solid, currentColor);stroke-width:1;stroke-dasharray:2 5}.et-time-picker .et-time-picker-ticks line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1}.et-time-picker .et-time-picker-labels text{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-mark{fill:var(--et-surface-color-muted-solid, currentColor)}.et-time-picker .et-time-picker-mark line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1.2;stroke-linecap:round}.et-time-picker .et-time-picker-readout{fill:var(--et-surface-color-solid, currentColor);font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-readout:where([data-long]){font-size:22px}.et-time-picker .et-time-picker-readout:where([data-longer]){font-size:16px}.et-time-picker .et-time-picker-readout:where([data-kind=duration]){font-size:20px}.et-time-picker .et-time-picker-note{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central}.et-time-picker .et-time-picker-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;box-sizing:border-box;inline-size:var(--et-time-picker-handle-size);block-size:var(--et-time-picker-handle-size);margin-block-start:calc(var(--et-time-picker-handle-size) / -2);margin-inline-start:calc(var(--et-time-picker-handle-size) / -2);border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:50%;background:var(--et-surface-background-solid, Canvas);transform:rotate(var(--_et-time-picker-handle-angle, 0deg)) translateY(calc(var(--et-time-picker-ring-size) * -.4)) rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));cursor:grab;outline:none;touch-action:none}.et-time-picker .et-time-picker-handle:where([data-empty]){opacity:0;pointer-events:none}.et-time-picker .et-time-picker-handle:where([data-dragging]){cursor:grabbing}.et-time-picker .et-time-picker-handle:focus-visible:not([data-pointer-focused]){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-time-picker:where([data-mode=single]) .et-time-picker-handle,.et-time-picker .et-time-picker-handle:where([data-active]){border:3px solid var(--et-surface-background-solid, Canvas);background:var(--et-theme-color-primary-solid, currentColor)}.et-time-picker:where([data-mode=single]) .et-time-picker-handle{box-shadow:0 0 0 calc(var(--et-time-picker-handle-size) * .35) color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 22%,transparent)}}\n"] }]
+                        '[attr.data-disabled]': 'timePicker.disabled() || null',
+                    }, template: "@let readoutState = readout();\n\n<div class=\"et-time-picker-ring\" etTimePickerRing>\n  <svg class=\"et-time-picker-ring-graphic\" aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 280 280\">\n    @let trackState = track();\n\n    @if (trackState.allBlocked) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-blocked\" />\n    }\n    @for (path of trackState.blocked; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-blocked\" />\n    }\n    @if (trackState.full) {\n      <circle [attr.cx]=\"CENTER\" [attr.cy]=\"CENTER\" [attr.r]=\"RADIUS\" class=\"et-time-picker-track\" />\n    }\n    @for (path of trackState.open; track $index) {\n      <path [attr.d]=\"path\" class=\"et-time-picker-track\" />\n    }\n    @if (arc(); as arcPath) {\n      <path [attr.d]=\"arcPath\" class=\"et-time-picker-arc\" />\n    }\n\n    <g class=\"et-time-picker-ticks\">\n      @for (tick of ticks; track tick.hour) {\n        <line [attr.x1]=\"tick.x1\" [attr.y1]=\"tick.y1\" [attr.x2]=\"tick.x2\" [attr.y2]=\"tick.y2\" />\n      }\n    </g>\n\n    <g class=\"et-time-picker-labels\">\n      @for (label of hourLabels(); track label.hour) {\n        <text [attr.x]=\"label.x\" [attr.y]=\"label.y\">{{ label.text }}</text>\n      }\n    </g>\n\n    @if (twelveHour()) {\n      <path\n        [attr.transform]=\"'translate(' + MOON.x + ' ' + MOON.y + ')'\"\n        class=\"et-time-picker-mark\"\n        d=\"M8.5 0.8 A6 6 0 1 0 11.2 8.6 A4.6 4.6 0 0 1 8.5 0.8 Z\"\n      />\n      <g class=\"et-time-picker-mark\">\n        <circle [attr.cx]=\"sun.x\" [attr.cy]=\"sun.y\" r=\"3.2\" />\n        @for (ray of sunRays; track ray.index) {\n          <line [attr.x1]=\"ray.x1\" [attr.y1]=\"ray.y1\" [attr.x2]=\"ray.x2\" [attr.y2]=\"ray.y2\" />\n        }\n      </g>\n    }\n\n    <text\n      [attr.x]=\"CENTER\"\n      [attr.y]=\"readoutState.note === null ? CENTER : CENTER - (readoutState.kind === 'duration' ? 2 : 4)\"\n      [attr.data-kind]=\"readoutState.kind\"\n      [attr.data-long]=\"readoutState.main.length > 5 || null\"\n      [attr.data-longer]=\"readoutState.main.length > 8 || null\"\n      class=\"et-time-picker-readout\"\n    >\n      {{ readoutState.main }}\n    </text>\n    @if (readoutState.note !== null) {\n      <text [attr.x]=\"CENTER\" [attr.y]=\"CENTER + 20\" class=\"et-time-picker-note\">{{ readoutState.note }}</text>\n    }\n  </svg>\n\n  <div\n    #startHandle=\"etTimePickerRingHandle\"\n    [style.--_et-time-picker-handle-angle]=\"(startHandle.angle() ?? 0) + 'deg'\"\n    class=\"et-time-picker-handle\"\n    etTimePickerRingHandle\n    side=\"start\"\n  ></div>\n\n  @if (timePicker.mode() === 'range') {\n    <div\n      #endHandle=\"etTimePickerRingHandle\"\n      [style.--_et-time-picker-handle-angle]=\"(endHandle.angle() ?? 0) + 'deg'\"\n      class=\"et-time-picker-handle\"\n      etTimePickerRingHandle\n      side=\"end\"\n    ></div>\n  }\n</div>\n", styles: ["@layer components{@property --et-time-picker-ring-size{syntax: \"<length>\"; inherits: true; initial-value: 280px;}@property --et-time-picker-handle-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}.et-time-picker{display:inline-flex;vertical-align:top;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:opacity .12s ease}.et-time-picker .et-time-picker-ring{position:relative;flex:none;inline-size:var(--et-time-picker-ring-size);block-size:var(--et-time-picker-ring-size);-webkit-tap-highlight-color:transparent}.et-time-picker .et-time-picker-ring-graphic{display:block;inline-size:100%;block-size:100%;overflow:visible;font-family:inherit}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{fill:none;stroke-width:28;stroke-linecap:butt}.et-time-picker .et-time-picker-track{stroke:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent)}.et-time-picker .et-time-picker-arc{stroke:var(--et-theme-color-primary-solid, currentColor);stroke-linecap:round;opacity:.45}.et-time-picker .et-time-picker-track,.et-time-picker .et-time-picker-arc{cursor:pointer}.et-time-picker .et-time-picker-blocked{fill:none;stroke:var(--et-surface-color-subtle-solid, currentColor);stroke-width:1;stroke-dasharray:2 5}.et-time-picker .et-time-picker-ticks line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1}.et-time-picker .et-time-picker-labels text{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-mark{fill:var(--et-surface-color-muted-solid, currentColor)}.et-time-picker .et-time-picker-mark line{stroke:var(--et-surface-color-muted-solid, currentColor);stroke-width:1.2;stroke-linecap:round}.et-time-picker .et-time-picker-readout{fill:var(--et-surface-color-solid, currentColor);font-size:28px;font-weight:500;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}.et-time-picker .et-time-picker-readout:where([data-long]){font-size:22px}.et-time-picker .et-time-picker-readout:where([data-longer]){font-size:16px}.et-time-picker .et-time-picker-readout:where([data-kind=duration]){font-size:20px}.et-time-picker .et-time-picker-note{fill:var(--et-surface-color-muted-solid, currentColor);font-size:11px;text-anchor:middle;dominant-baseline:central}.et-time-picker .et-time-picker-handle{position:absolute;inset-block-start:50%;inset-inline-start:50%;box-sizing:border-box;inline-size:var(--et-time-picker-handle-size);block-size:var(--et-time-picker-handle-size);margin-block-start:calc(var(--et-time-picker-handle-size) / -2);margin-inline-start:calc(var(--et-time-picker-handle-size) / -2);border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:50%;background:var(--et-surface-background-solid, Canvas);transform:rotate(var(--_et-time-picker-handle-angle, 0deg)) translateY(calc(var(--et-time-picker-ring-size) * -.4)) rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));--_et-time-picker-halo-shadow: 0 0 0 calc(var(--et-time-picker-handle-size) * var(--_et-time-picker-halo)) color-mix( in srgb, var(--et-theme-color-primary-solid, currentColor) var(--_et-time-picker-halo-opacity, 16%), transparent );box-shadow:var(--_et-time-picker-halo-shadow, none);transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;cursor:grab;outline:none;touch-action:none}.et-time-picker .et-time-picker-handle:where([data-empty]){opacity:0;pointer-events:none}.et-time-picker .et-time-picker-handle:where([data-dragging]){cursor:grabbing}.et-time-picker .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .3}.et-time-picker .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker .et-time-picker-handle:focus-visible:not([data-pointer-focused]){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-time-picker:where([data-mode=single]) .et-time-picker-handle,.et-time-picker .et-time-picker-handle:where([data-active]){border:3px solid var(--et-surface-background-solid, Canvas);background:var(--et-theme-color-primary-solid, currentColor)}.et-time-picker:where([data-mode=single]) .et-time-picker-handle{--_et-time-picker-halo: .35;--_et-time-picker-halo-opacity: 22%}.et-time-picker[data-mode=range] .et-time-picker-handle:hover:not([data-disabled],[data-dragging],[data-active]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,var(--et-surface-background-solid, Canvas))}.et-time-picker[data-mode=single] .et-time-picker-handle:hover:not([data-disabled],[data-dragging]){--_et-time-picker-halo: .5;--_et-time-picker-halo-opacity: 28%}.et-time-picker[data-mode=single] .et-time-picker-handle[data-dragging]:not([data-disabled]){--_et-time-picker-halo: .65;--_et-time-picker-halo-opacity: 32%}.et-time-picker:where([data-disabled]){opacity:.4}.et-time-picker:where([data-disabled]) .et-time-picker-track,.et-time-picker:where([data-disabled]) .et-time-picker-arc,.et-time-picker:where([data-disabled]) .et-time-picker-handle{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.et-time-picker,.et-time-picker .et-time-picker-handle{transition:none}}}\n"] }]
         }], propDecorators: { ring: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TimePickerRingDirective), { isSignal: true }] }] } });
 
 const TIME_PICKER_IMPORTS = [
@@ -33262,10 +33420,7 @@ const createPickerPanes = (order, pickerOpen) => {
  * The day time-only values are read on: today, or the same weekday a week earlier when the
  * runtime's clocks change today, so every wall-clock time exists on it.
  */
-const timeReferenceDay = () => {
-    const today = startOfDay(new Date());
-    return today.getTimezoneOffset() === endOfDay(today).getTimezoneOffset() ? today : subWeeks(today, 1);
-};
+const timeReferenceDay = () => clockSafeDay(new Date());
 const MERIDIEM_PATTERN = /\s*([ap])\.?\s*(?:m\.?)?$/i;
 const SEPARATED_PATTERN = /^(\d{1,2})(?:[:.\s](\d{1,2})(?:[:.\s](\d{1,2}))?)?$/;
 const COMPACT_PATTERN = /^\d{3,6}$/;
@@ -33774,7 +33929,7 @@ class DateTimeInputComponent {
         this.dateTimeInput.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeInputComponent, isStandalone: true, selector: "et-date-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, dateTabLabel: { classPropertyName: "dateTabLabel", publicName: "dateTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timeTabLabel: { classPropertyName: "timeTabLabel", publicName: "timeTabLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-date-time-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group\n          [value]=\"panes.active()\"\n          [aria-label]=\"dateTimeLabels().paneSwitch\"\n          (valueChange)=\"panes.select($event)\"\n        >\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"panes.active()\"\n        [attr.data-nav]=\"panes.nav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.pickerDate()\"\n          [min]=\"dateTimeInput.pickerMinDate()\"\n          [max]=\"dateTimeInput.pickerMaxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"handleDateSelect($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.pickerTime()\"\n            [day]=\"dateTimeInput.pickerDate()\"\n            [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeInputFieldDirective, selector: "input[etDateTimeInputField]", exportAs: ["etDateTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeInputComponent, isStandalone: true, selector: "et-date-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, dateTabLabel: { classPropertyName: "dateTabLabel", publicName: "dateTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timeTabLabel: { classPropertyName: "timeTabLabel", publicName: "timeTabLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-date-time-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group\n          [value]=\"panes.active()\"\n          [aria-label]=\"dateTimeLabels().paneSwitch\"\n          (valueChange)=\"panes.select($event)\"\n        >\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"panes.active()\"\n        [attr.data-nav]=\"panes.nav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.pickerDate()\"\n          [min]=\"dateTimeInput.pickerMinDate()\"\n          [max]=\"dateTimeInput.pickerMaxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"handleDateSelect($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.pickerTime()\"\n            [disabled]=\"dateTimeInput.disabled()\"\n            [day]=\"dateTimeInput.pickerDate()\"\n            [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeInputFieldDirective, selector: "input[etDateTimeInputField]", exportAs: ["etDateTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeInputComponent, decorators: [{
             type: Component,
@@ -33832,7 +33987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-date-time-input',
-                    }, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group\n          [value]=\"panes.active()\"\n          [aria-label]=\"dateTimeLabels().paneSwitch\"\n          (valueChange)=\"panes.select($event)\"\n        >\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"panes.active()\"\n        [attr.data-nav]=\"panes.nav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.pickerDate()\"\n          [min]=\"dateTimeInput.pickerMinDate()\"\n          [max]=\"dateTimeInput.pickerMaxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"handleDateSelect($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.pickerTime()\"\n            [day]=\"dateTimeInput.pickerDate()\"\n            [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"] }]
+                    }, template: "<input\n  [etInputMask]=\"dateTimeInput.maskPattern()\"\n  class=\"et-date-time-input-field\"\n  etDateTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"dateTimeInput.localReadingId()\" class=\"et-date-time-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-time-input-panel\">\n      <div class=\"et-date-time-input-panel-tabs\">\n        <et-segmented-button-group\n          [value]=\"panes.active()\"\n          [aria-label]=\"dateTimeLabels().paneSwitch\"\n          (valueChange)=\"panes.select($event)\"\n        >\n          <et-segmented-button value=\"date\">{{ resolvedDateTabLabel() }}</et-segmented-button>\n          <et-segmented-button value=\"time\">{{ resolvedTimeTabLabel() }}</et-segmented-button>\n        </et-segmented-button-group>\n      </div>\n\n      <div\n        [attr.data-active-pane]=\"panes.active()\"\n        [attr.data-nav]=\"panes.nav()\"\n        class=\"et-date-time-input-panel-panes\"\n        etDateTimePickerPanes\n      >\n        <et-calendar\n          [value]=\"dateTimeInput.pickerDate()\"\n          [min]=\"dateTimeInput.pickerMinDate()\"\n          [max]=\"dateTimeInput.pickerMaxDate()\"\n          [dateFilter]=\"dateTimeInput.dateFilter()\"\n          [startAt]=\"dateTimeInput.startAt()\"\n          [startView]=\"dateTimeInput.startView()\"\n          [dateClass]=\"dateTimeInput.dateClass()\"\n          [weekNumbers]=\"dateTimeInput.weekNumbers()\"\n          [firstDayOfWeek]=\"dateTimeInput.firstDayOfWeek()\"\n          [locale]=\"dateTimeInput.effectiveLocale()\"\n          (valueChange)=\"handleDateSelect($event)\"\n        />\n        <div class=\"et-date-time-input-panel-time-pane\">\n          <et-time-picker\n            [value]=\"dateTimeInput.pickerTime()\"\n            [disabled]=\"dateTimeInput.disabled()\"\n            [day]=\"dateTimeInput.pickerDate()\"\n            [format]=\"dateTimeInput.effectiveDisplayFormat()\"\n            [locale]=\"dateTimeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"dateTimeInput.minTime()\"\n            [max]=\"dateTimeInput.maxTime()\"\n            [timeFilter]=\"dateTimeInput.timeFilter()\"\n            (valueChange)=\"dateTimeInput.selectTime($event)\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-input{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;flex:1;min-inline-size:0;color:inherit}et-date-time-input .et-date-time-input-field{min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-date-time-input .et-date-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-date-time-input .et-date-time-input-field:disabled{cursor:not-allowed}et-date-time-input .et-date-time-input-local-reading{font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-input .et-date-time-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-date-time-input[data-mixed] .et-date-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-date-time-input-panel .et-date-time-input-panel-tabs{display:none}.et-date-time-input-panel .et-date-time-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:stretch;display:flex}.et-date-time-input-panel .et-time-picker{align-items:center;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-time-pane{align-self:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-time-picker{border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=date]>.et-date-time-input-panel-time-pane{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-active-pane=time]>et-calendar{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=forward][data-active-pane=time]>.et-date-time-input-panel-time-pane{animation:et-date-time-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-input-panel .et-date-time-input-panel-panes[data-nav=backward][data-active-pane=date]>et-calendar{animation:et-date-time-input-pane-in-backward .2s ease}@keyframes et-date-time-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-input-panel-panes>et-calendar,.et-date-time-input-panel-panes>.et-date-time-input-panel-time-pane{animation:none}}}\n"] }]
         }], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], dateTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTabLabel", required: false }] }], timeTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeTabLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
 
 const DATE_TIME_INPUT_IMPORTS = [
@@ -33948,6 +34103,7 @@ class DateTimeRangeInputDirective extends DateRangePickerInputDirective {
             host: this,
             presets: this.presets,
             labels: this.dateTimeLabels,
+            firstDayOfWeek: this.firstDayOfWeek,
             normalize: (date) => date,
         });
         /** The two days the picker calendar highlights - committed, else picked with no time yet. */
@@ -34203,7 +34359,7 @@ class DateTimeRangeInputComponent {
         this.rangeInput.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeRangeInputComponent, isStandalone: true, selector: "et-date-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, datesTabLabel: { classPropertyName: "datesTabLabel", publicName: "datesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timesTabLabel: { classPropertyName: "timesTabLabel", publicName: "timesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-date-time-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "presets", "presets", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-range-presets-layout\">\n      @if (rangeInput.presetList.options().length > 0) {\n        <et-date-range-presets\n          [options]=\"rangeInput.presetList.options()\"\n          (presetSelect)=\"rangeInput.selectPreset($event)\"\n        />\n      }\n\n      <div class=\"et-date-time-range-input-panel\">\n        <div class=\"et-date-time-range-input-panel-tabs\">\n          <et-segmented-button-group\n            [value]=\"panes.active()\"\n            [aria-label]=\"dateTimeLabels().paneSwitch\"\n            (valueChange)=\"panes.select($event)\"\n          >\n            <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n            <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n          </et-segmented-button-group>\n        </div>\n\n        <div\n          [attr.data-active-pane]=\"panes.active()\"\n          [attr.data-nav]=\"panes.nav()\"\n          class=\"et-date-time-range-input-panel-panes\"\n          etDateTimePickerPanes\n        >\n          <et-calendar\n            [rangeValue]=\"rangeInput.pickerDateRange()\"\n            [min]=\"rangeInput.pickerMinDate()\"\n            [max]=\"rangeInput.pickerMaxDate()\"\n            [dateFilter]=\"rangeInput.dateFilter()\"\n            [startAt]=\"rangeInput.startAt()\"\n            [startView]=\"rangeInput.startView()\"\n            [dateClass]=\"rangeInput.dateClass()\"\n            [weekNumbers]=\"rangeInput.weekNumbers()\"\n            [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            (rangeValueChange)=\"handleRangeSelect($event)\"\n            mode=\"range\"\n          />\n\n          <et-time-picker\n            [(activeSide)]=\"rangeInput.pickerActiveSide\"\n            [rangeValue]=\"rangeInput.pickerTimeRange()\"\n            [rangeDays]=\"rangeInput.pickerDateRange()\"\n            [format]=\"rangeInput.effectiveDisplayFormat()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"rangeInput.minTime()\"\n            [max]=\"rangeInput.maxTime()\"\n            [timeFilter]=\"rangeInput.timeFilter()\"\n            [startLabel]=\"startTimeLabel()\"\n            [endLabel]=\"endTimeLabel()\"\n            (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n            (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n            mode=\"range\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeRangeInputFieldDirective, selector: "input[etDateTimeRangeInputField]", exportAs: ["etDateTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "component", type: DateRangePresetsComponent, selector: "et-date-range-presets", inputs: ["options"], outputs: ["presetSelect"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: DateTimeRangeInputComponent, isStandalone: true, selector: "et-date-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, datesTabLabel: { classPropertyName: "datesTabLabel", publicName: "datesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, timesTabLabel: { classPropertyName: "timesTabLabel", publicName: "timesTabLabel", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-date-time-range-input" }, providers: [provideIcons(CALENDAR_ICON, TIMES_ICON)], hostDirectives: [{ directive: DateTimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "timeZone", "timeZone", "timeZoneLabel", "timeZoneLabel", "locale", "locale", "mask", "mask", "minDate", "minDate", "maxDate", "maxDate", "dateFilter", "dateFilter", "startAt", "startAt", "startView", "startView", "dateClass", "dateClass", "weekNumbers", "weekNumbers", "firstDayOfWeek", "firstDayOfWeek", "presets", "presets", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-range-presets-layout\">\n      @if (rangeInput.presetList.options().length > 0) {\n        <et-date-range-presets\n          [options]=\"rangeInput.presetList.options()\"\n          (presetSelect)=\"rangeInput.selectPreset($event)\"\n        />\n      }\n\n      <div class=\"et-date-time-range-input-panel\">\n        <div class=\"et-date-time-range-input-panel-tabs\">\n          <et-segmented-button-group\n            [value]=\"panes.active()\"\n            [aria-label]=\"dateTimeLabels().paneSwitch\"\n            (valueChange)=\"panes.select($event)\"\n          >\n            <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n            <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n          </et-segmented-button-group>\n        </div>\n\n        <div\n          [attr.data-active-pane]=\"panes.active()\"\n          [attr.data-nav]=\"panes.nav()\"\n          class=\"et-date-time-range-input-panel-panes\"\n          etDateTimePickerPanes\n        >\n          <et-calendar\n            [rangeValue]=\"rangeInput.pickerDateRange()\"\n            [min]=\"rangeInput.pickerMinDate()\"\n            [max]=\"rangeInput.pickerMaxDate()\"\n            [dateFilter]=\"rangeInput.dateFilter()\"\n            [startAt]=\"rangeInput.startAt()\"\n            [startView]=\"rangeInput.startView()\"\n            [dateClass]=\"rangeInput.dateClass()\"\n            [weekNumbers]=\"rangeInput.weekNumbers()\"\n            [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            (rangeValueChange)=\"handleRangeSelect($event)\"\n            mode=\"range\"\n          />\n\n          <et-time-picker\n            [(activeSide)]=\"rangeInput.pickerActiveSide\"\n            [rangeValue]=\"rangeInput.pickerTimeRange()\"\n            [disabled]=\"rangeInput.disabled()\"\n            [rangeDays]=\"rangeInput.pickerDateRange()\"\n            [format]=\"rangeInput.effectiveDisplayFormat()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"rangeInput.minTime()\"\n            [max]=\"rangeInput.maxTime()\"\n            [timeFilter]=\"rangeInput.timeFilter()\"\n            [startLabel]=\"startTimeLabel()\"\n            [endLabel]=\"endTimeLabel()\"\n            (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n            (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n            mode=\"range\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: CalendarComponent, selector: "et-calendar", inputs: ["weekNumbers", "previousMonthLabel", "nextMonthLabel"] }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: DateTimeRangeInputFieldDirective, selector: "input[etDateTimeRangeInputField]", exportAs: ["etDateTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "component", type: DateRangePresetsComponent, selector: "et-date-range-presets", inputs: ["options"], outputs: ["presetSelect"] }, { kind: "directive", type: DateTimePickerPanesDirective, selector: "[etDateTimePickerPanes]" }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DateTimeRangeInputComponent, decorators: [{
             type: Component,
@@ -34269,7 +34425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         role: 'group',
                         '[attr.aria-label]': 'rangeInput.ariaLabel() || null',
                         '[attr.aria-labelledby]': 'rangeInput.labelId()',
-                    }, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-range-presets-layout\">\n      @if (rangeInput.presetList.options().length > 0) {\n        <et-date-range-presets\n          [options]=\"rangeInput.presetList.options()\"\n          (presetSelect)=\"rangeInput.selectPreset($event)\"\n        />\n      }\n\n      <div class=\"et-date-time-range-input-panel\">\n        <div class=\"et-date-time-range-input-panel-tabs\">\n          <et-segmented-button-group\n            [value]=\"panes.active()\"\n            [aria-label]=\"dateTimeLabels().paneSwitch\"\n            (valueChange)=\"panes.select($event)\"\n          >\n            <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n            <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n          </et-segmented-button-group>\n        </div>\n\n        <div\n          [attr.data-active-pane]=\"panes.active()\"\n          [attr.data-nav]=\"panes.nav()\"\n          class=\"et-date-time-range-input-panel-panes\"\n          etDateTimePickerPanes\n        >\n          <et-calendar\n            [rangeValue]=\"rangeInput.pickerDateRange()\"\n            [min]=\"rangeInput.pickerMinDate()\"\n            [max]=\"rangeInput.pickerMaxDate()\"\n            [dateFilter]=\"rangeInput.dateFilter()\"\n            [startAt]=\"rangeInput.startAt()\"\n            [startView]=\"rangeInput.startView()\"\n            [dateClass]=\"rangeInput.dateClass()\"\n            [weekNumbers]=\"rangeInput.weekNumbers()\"\n            [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            (rangeValueChange)=\"handleRangeSelect($event)\"\n            mode=\"range\"\n          />\n\n          <et-time-picker\n            [(activeSide)]=\"rangeInput.pickerActiveSide\"\n            [rangeValue]=\"rangeInput.pickerTimeRange()\"\n            [rangeDays]=\"rangeInput.pickerDateRange()\"\n            [format]=\"rangeInput.effectiveDisplayFormat()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"rangeInput.minTime()\"\n            [max]=\"rangeInput.maxTime()\"\n            [timeFilter]=\"rangeInput.timeFilter()\"\n            [startLabel]=\"startTimeLabel()\"\n            [endLabel]=\"endTimeLabel()\"\n            (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n            (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n            mode=\"range\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"] }]
+                    }, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-date-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-date-time-range-input-field\"\n  etDateTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n@if (localReadingText(); as reading) {\n  <span [id]=\"rangeInput.localReadingId()\" class=\"et-date-time-range-input-local-reading\">{{ reading }}</span>\n}\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-calendar\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <div class=\"et-date-range-presets-layout\">\n      @if (rangeInput.presetList.options().length > 0) {\n        <et-date-range-presets\n          [options]=\"rangeInput.presetList.options()\"\n          (presetSelect)=\"rangeInput.selectPreset($event)\"\n        />\n      }\n\n      <div class=\"et-date-time-range-input-panel\">\n        <div class=\"et-date-time-range-input-panel-tabs\">\n          <et-segmented-button-group\n            [value]=\"panes.active()\"\n            [aria-label]=\"dateTimeLabels().paneSwitch\"\n            (valueChange)=\"panes.select($event)\"\n          >\n            <et-segmented-button value=\"dates\">{{ resolvedDatesTabLabel() }}</et-segmented-button>\n            <et-segmented-button value=\"times\">{{ resolvedTimesTabLabel() }}</et-segmented-button>\n          </et-segmented-button-group>\n        </div>\n\n        <div\n          [attr.data-active-pane]=\"panes.active()\"\n          [attr.data-nav]=\"panes.nav()\"\n          class=\"et-date-time-range-input-panel-panes\"\n          etDateTimePickerPanes\n        >\n          <et-calendar\n            [rangeValue]=\"rangeInput.pickerDateRange()\"\n            [min]=\"rangeInput.pickerMinDate()\"\n            [max]=\"rangeInput.pickerMaxDate()\"\n            [dateFilter]=\"rangeInput.dateFilter()\"\n            [startAt]=\"rangeInput.startAt()\"\n            [startView]=\"rangeInput.startView()\"\n            [dateClass]=\"rangeInput.dateClass()\"\n            [weekNumbers]=\"rangeInput.weekNumbers()\"\n            [firstDayOfWeek]=\"rangeInput.firstDayOfWeek()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            (rangeValueChange)=\"handleRangeSelect($event)\"\n            mode=\"range\"\n          />\n\n          <et-time-picker\n            [(activeSide)]=\"rangeInput.pickerActiveSide\"\n            [rangeValue]=\"rangeInput.pickerTimeRange()\"\n            [disabled]=\"rangeInput.disabled()\"\n            [rangeDays]=\"rangeInput.pickerDateRange()\"\n            [format]=\"rangeInput.effectiveDisplayFormat()\"\n            [locale]=\"rangeInput.effectiveLocale()\"\n            [minuteStep]=\"minuteStep()\"\n            [min]=\"rangeInput.minTime()\"\n            [max]=\"rangeInput.maxTime()\"\n            [timeFilter]=\"rangeInput.timeFilter()\"\n            [startLabel]=\"startTimeLabel()\"\n            [endLabel]=\"endTimeLabel()\"\n            (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n            (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n            mode=\"range\"\n          />\n        </div>\n      </div>\n    </div>\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-date-time-range-input{--et-range-input-stack-threshold: 22em;container:et-date-time-range-input / inline-size}et-date-time-range-input .et-date-time-range-input-local-reading{flex-basis:100%;font-size:var(--et-form-field-hint-font-size);line-height:1.3;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field[data-disabled] et-date-time-range-input .et-date-time-range-input-local-reading{color:var(--et-surface-interaction-disabled-solid, currentColor)}@container et-date-time-range-input (inline-size < 22em){et-date-time-range-input .et-date-time-range-input-field{flex-basis:100%}et-date-time-range-input .et-date-time-range-input-separator{display:none}}.et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:none}.et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:flex;align-items:start;gap:12px}.et-date-time-range-input-panel>.et-date-time-range-input-panel-panes>et-time-picker{align-self:stretch;border-inline-start:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .08));padding-inline-start:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs{display:block;margin-block-end:12px}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs .et-segmented-button-group-buttons{display:flex;align-self:stretch}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-tabs et-segmented-button{flex:1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes{display:grid;justify-content:center;justify-items:center;align-items:center}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes>et-time-picker{grid-area:1 / 1}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel et-time-picker{align-self:center;border-inline-start:none;padding-inline-start:0}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=times]>et-calendar,.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-active-pane=dates]>et-time-picker{visibility:hidden}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=forward][data-active-pane=times]>et-time-picker{animation:et-date-time-range-input-pane-in-forward .2s ease}.et-overlay.et-date-picker-sheet .et-date-time-range-input-panel .et-date-time-range-input-panel-panes[data-nav=backward][data-active-pane=dates]>et-calendar{animation:et-date-time-range-input-pane-in-backward .2s ease}@keyframes et-date-time-range-input-pane-in-forward{0%{opacity:0;transform:translate(14px)}}@keyframes et-date-time-range-input-pane-in-backward{0%{opacity:0;transform:translate(-14px)}}@media(prefers-reduced-motion:reduce){.et-date-time-range-input-panel-panes>et-calendar,.et-date-time-range-input-panel-panes>et-time-picker{animation:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], datesTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "datesTabLabel", required: false }] }], timesTabLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timesTabLabel", required: false }] }], startTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTimeLabel", required: false }] }], endTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTimeLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
 
 const DATE_TIME_RANGE_INPUT_IMPORTS = [
@@ -34345,22 +34501,23 @@ const dateTimeRangeOrder = (path, options = {}) => rangeOrder({
  */
 const timeRangeOrder = (path, options = {}) => rangeOrder({ path, valueFormat: options.valueFormat ?? inject(TIME_FORMAT), options });
 const resolveBound = (bound, ctx) => typeof bound === 'function' ? bound(ctx) : (bound ?? null);
-const bounds = ({ path, sidesOf, valueFormat, options, unit, label }) => {
+const bounds = ({ path, sidesOf, valueFormat, options, unit, onZoneCalendar, label }) => {
     const labels = injectDateTimeLabels();
     const locale = inject(DATE_LOCALE);
     const timeZone = knownTimeZone(options.timeZone);
     const formatBound = (bound) => formatInZone(bound, { format: label, locale, timeZone }) ?? '';
+    const unitOf = (date) => unit(onZoneCalendar && timeZone !== null ? zonedProxy(date, timeZone) : date).getTime();
     validate(path, (ctx) => {
         const sides = sidesOf(ctx.value())
             .map((side) => parseSide(side, { valueFormat, timeZone }))
             .filter((side) => side !== null)
-            .map((side) => unit(side).getTime());
+            .map(unitOf);
         const min = resolveBound(options.min, ctx);
         const max = resolveBound(options.max, ctx);
-        if (min !== null && sides.some((side) => side < unit(min).getTime())) {
+        if (min !== null && sides.some((side) => side < unitOf(min))) {
             return { kind: 'rangeMin', min, message: options.message ?? labels().rangeMin(formatBound(min)) };
         }
-        if (max !== null && sides.some((side) => side > unit(max).getTime())) {
+        if (max !== null && sides.some((side) => side > unitOf(max))) {
             return { kind: 'rangeMax', max, message: options.message ?? labels().rangeMax(formatBound(max)) };
         }
         return undefined;
@@ -34386,8 +34543,9 @@ const dateRangeBounds = (path, options) => {
     rangeBounds({
         path,
         valueFormat: options.valueFormat ?? inject(DATE_FORMAT),
-        options,
+        options: withControlTimeZone(options),
         unit: (date) => startOfCalendarUnit(date, precision),
+        onZoneCalendar: true,
         label: displayFormatForPrecision(precision, inject(DATE_LOCALE)),
     });
 };
@@ -34428,8 +34586,9 @@ const dateBounds = (path, options = {}) => {
         path,
         sidesOf: (value) => [value],
         valueFormat: options.valueFormat ?? inject(DATE_FORMAT),
-        options,
+        options: withControlTimeZone(options),
         unit: (date) => startOfCalendarUnit(date, precision),
+        onZoneCalendar: true,
         label: displayFormatForPrecision(precision, inject(DATE_LOCALE)),
     });
 };
@@ -35149,7 +35308,7 @@ class TimeInputComponent {
         this.timeInput.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeInputComponent, isStandalone: true, selector: "et-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-time-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"timeInput.maskPattern()\"\n  class=\"et-time-input-field\"\n  etTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [value]=\"timeInput.time()\"\n      [format]=\"timeInput.effectiveDisplayFormat()\"\n      [locale]=\"timeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"timeInput.minTime()\"\n      [max]=\"timeInput.maxTime()\"\n      [timeFilter]=\"timeInput.timeFilter()\"\n      (valueChange)=\"timeInput.selectTime($event)\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeInputFieldDirective, selector: "input[etTimeInputField]", exportAs: ["etTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeInputComponent, isStandalone: true, selector: "et-time-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-time-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [etInputMask]=\"timeInput.maskPattern()\"\n  class=\"et-time-input-field\"\n  etTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [value]=\"timeInput.time()\"\n      [disabled]=\"timeInput.disabled()\"\n      [format]=\"timeInput.effectiveDisplayFormat()\"\n      [locale]=\"timeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"timeInput.minTime()\"\n      [max]=\"timeInput.maxTime()\"\n      [timeFilter]=\"timeInput.timeFilter()\"\n      (valueChange)=\"timeInput.selectTime($event)\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeInputFieldDirective, selector: "input[etTimeInputField]", exportAs: ["etTimeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeInputComponent, decorators: [{
             type: Component,
@@ -35193,7 +35352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-time-input',
-                    }, template: "<input\n  [etInputMask]=\"timeInput.maskPattern()\"\n  class=\"et-time-input-field\"\n  etTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [value]=\"timeInput.time()\"\n      [format]=\"timeInput.effectiveDisplayFormat()\"\n      [locale]=\"timeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"timeInput.minTime()\"\n      [max]=\"timeInput.maxTime()\"\n      [timeFilter]=\"timeInput.timeFilter()\"\n      (valueChange)=\"timeInput.selectTime($event)\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"] }]
+                    }, template: "<input\n  [etInputMask]=\"timeInput.maskPattern()\"\n  class=\"et-time-input-field\"\n  etTimeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [value]=\"timeInput.time()\"\n      [disabled]=\"timeInput.disabled()\"\n      [format]=\"timeInput.effectiveDisplayFormat()\"\n      [locale]=\"timeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"timeInput.minTime()\"\n      [max]=\"timeInput.maxTime()\"\n      [timeFilter]=\"timeInput.timeFilter()\"\n      (valueChange)=\"timeInput.selectTime($event)\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-input{display:flex;align-items:center;flex:1;min-inline-size:0;color:inherit}et-time-input .et-time-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-time-input .et-time-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-time-input .et-time-input-field:disabled{cursor:not-allowed}et-time-input[data-mixed] .et-time-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"] }]
         }], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
 
 const TIME_INPUT_IMPORTS = [
@@ -35369,7 +35528,7 @@ class TimeRangeInputComponent {
         this.rangeInput.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeRangeInputComponent, isStandalone: true, selector: "et-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-time-range-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [(activeSide)]=\"rangeInput.pickerActiveSide\"\n      [rangeValue]=\"rangeInput.calendarRange()\"\n      [format]=\"rangeInput.effectiveDisplayFormat()\"\n      [locale]=\"rangeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"rangeInput.minTime()\"\n      [max]=\"rangeInput.maxTime()\"\n      [timeFilter]=\"rangeInput.timeFilter()\"\n      [startLabel]=\"startTimeLabel()\"\n      [endLabel]=\"endTimeLabel()\"\n      (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n      (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n      mode=\"range\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeRangeInputFieldDirective, selector: "input[etTimeRangeInputField]", exportAs: ["etTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TimeRangeInputComponent, isStandalone: true, selector: "et-time-range-input", inputs: { pickerTriggerLabel: { classPropertyName: "pickerTriggerLabel", publicName: "pickerTriggerLabel", isSignal: true, isRequired: false, transformFunction: null }, dialogLabel: { classPropertyName: "dialogLabel", publicName: "dialogLabel", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, startTimeLabel: { classPropertyName: "startTimeLabel", publicName: "startTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, endTimeLabel: { classPropertyName: "endTimeLabel", publicName: "endTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "rangeInput.ariaLabel() || null", "attr.aria-labelledby": "rangeInput.labelId()" }, classAttribute: "et-time-range-input" }, providers: [provideIcons(CLOCK_ICON, TIMES_ICON)], hostDirectives: [{ directive: TimeRangeInputDirective, inputs: ["value", "value", "mixed", "mixed", "mixedLabel", "mixedLabel", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "startPlaceholder", "startPlaceholder", "endPlaceholder", "endPlaceholder", "parseErrorMessage", "parseErrorMessage", "valueFormat", "valueFormat", "displayFormat", "displayFormat", "locale", "locale", "mask", "mask", "minTime", "minTime", "maxTime", "maxTime", "timeFilter", "timeFilter", "pickerOpen", "pickerOpen", "startAriaLabel", "startAriaLabel", "endAriaLabel", "endAriaLabel", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "pickerOpenChange", "pickerOpenChange"] }], ngImport: i0, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [(activeSide)]=\"rangeInput.pickerActiveSide\"\n      [rangeValue]=\"rangeInput.calendarRange()\"\n      [disabled]=\"rangeInput.disabled()\"\n      [format]=\"rangeInput.effectiveDisplayFormat()\"\n      [locale]=\"rangeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"rangeInput.minTime()\"\n      [max]=\"rangeInput.maxTime()\"\n      [timeFilter]=\"rangeInput.timeFilter()\"\n      [startLabel]=\"startTimeLabel()\"\n      [endLabel]=\"endTimeLabel()\"\n      (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n      (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n      mode=\"range\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: TimePickerComponent, selector: "et-time-picker" }, { kind: "directive", type: TimeRangeInputFieldDirective, selector: "input[etTimeRangeInputField]", exportAs: ["etTimeRangeInputField"] }, { kind: "directive", type: DatePickerSurfaceDirective, selector: "ng-template[etDatePickerSurface]", exportAs: ["etDatePickerSurface"] }, { kind: "directive", type: DatePickerTriggerDirective, selector: "button[etDatePickerTrigger]", exportAs: ["etDatePickerTrigger"] }, { kind: "component", type: DatePickerPanelComponent, selector: "et-date-picker-panel", inputs: ["dialogLabel"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: InputMaskDirective, selector: "[etInputMask]", inputs: ["etInputMask", "maskValueMode", "placeholderChar"], exportAs: ["etInputMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimeRangeInputComponent, decorators: [{
             type: Component,
@@ -35419,7 +35578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         role: 'group',
                         '[attr.aria-label]': 'rangeInput.ariaLabel() || null',
                         '[attr.aria-labelledby]': 'rangeInput.labelId()',
-                    }, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [(activeSide)]=\"rangeInput.pickerActiveSide\"\n      [rangeValue]=\"rangeInput.calendarRange()\"\n      [format]=\"rangeInput.effectiveDisplayFormat()\"\n      [locale]=\"rangeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"rangeInput.minTime()\"\n      [max]=\"rangeInput.maxTime()\"\n      [timeFilter]=\"rangeInput.timeFilter()\"\n      [startLabel]=\"startTimeLabel()\"\n      [endLabel]=\"endTimeLabel()\"\n      (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n      (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n      mode=\"range\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"] }]
+                    }, template: "<input\n  [attr.aria-label]=\"resolvedStartAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"start\"\n/>\n\n<span class=\"et-time-range-input-separator\" aria-hidden=\"true\">\u2013</span>\n\n<input\n  [attr.aria-label]=\"resolvedEndAriaLabel()\"\n  [etInputMask]=\"rangeInput.maskPattern()\"\n  class=\"et-time-range-input-field\"\n  etTimeRangeInputField\n  maskValueMode=\"masked\"\n  placeholderChar=\"_\"\n  side=\"end\"\n/>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- mousedown is prevented so the field keeps focus: its blur would unmount this\n         button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button [attr.aria-label]=\"resolvedPickerTriggerLabel()\" class=\"et-input-picker-trigger\" etDatePickerTrigger>\n    <i etIcon=\"et-clock\"></i>\n  </button>\n</ng-template>\n\n<ng-template etDatePickerSurface>\n  <et-date-picker-panel [dialogLabel]=\"resolvedDialogLabel()\">\n    <et-time-picker\n      [(activeSide)]=\"rangeInput.pickerActiveSide\"\n      [rangeValue]=\"rangeInput.calendarRange()\"\n      [disabled]=\"rangeInput.disabled()\"\n      [format]=\"rangeInput.effectiveDisplayFormat()\"\n      [locale]=\"rangeInput.effectiveLocale()\"\n      [minuteStep]=\"minuteStep()\"\n      [min]=\"rangeInput.minTime()\"\n      [max]=\"rangeInput.maxTime()\"\n      [timeFilter]=\"rangeInput.timeFilter()\"\n      [startLabel]=\"startTimeLabel()\"\n      [endLabel]=\"endTimeLabel()\"\n      (timeSelect)=\"rangeInput.selectTime($event.side, $event.time)\"\n      (rangeHandOff)=\"rangeInput.focusSideFromPicker($event)\"\n      mode=\"range\"\n    />\n  </et-date-picker-panel>\n</ng-template>\n", styles: ["@layer components{et-time-range-input{--et-range-input-stack-threshold: 11em;container:et-time-range-input / inline-size}@container et-time-range-input (inline-size < 11em){et-time-range-input .et-time-range-input-field{flex-basis:100%}et-time-range-input .et-time-range-input-separator{display:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pickerTriggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTriggerLabel", required: false }] }], dialogLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialogLabel", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], startTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTimeLabel", required: false }] }], endTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTimeLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
 
 const TIME_RANGE_INPUT_IMPORTS = [
@@ -35647,7 +35806,9 @@ const DROPZONE_FILE_CONSTRAINTS = /* @__PURE__ */ createManagedMetadataKey((_sta
     constraints: data,
     rejections: signal([]),
     labels: signal(DEFAULT_DROPZONE_LABELS),
+    effectiveConstraints: signal(undefined),
 }));
+/** @internal */
 const rejectionMessage = (rejection, context) => {
     const name = rejection.file.name;
     const { constraints, labels } = context;
@@ -35692,7 +35853,7 @@ const dropzoneFiles = (path, constraints) => {
         return channel.rejections().map((rejection) => ({
             kind: DROPZONE_FILES_ERROR_KIND,
             message: currentConstraints?.message?.(rejection) ??
-                rejectionMessage(rejection, { constraints: currentConstraints, labels }),
+                rejectionMessage(rejection, { constraints: channel.effectiveConstraints() ?? currentConstraints, labels }),
         }));
     });
 };
@@ -35791,6 +35952,10 @@ class DropzoneDirective extends FieldStateControlDirective {
             return state?.metadata(DROPZONE_FILE_CONSTRAINTS) ?? null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fileValidation" }] : /* istanbul ignore next */ []));
+        /** The rejections no bound `dropzoneFiles()` rule turns into field errors - the dropzone reports these itself. */
+        this.unhandledRejections = computed(() => (this.fileValidation() ? [] : this.lastRejections()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unhandledRejections" }] : /* istanbul ignore next */ []));
+        /** @internal */
         this.fileConstraints = computed(() => {
             const schema = this.fileValidation()?.constraints();
             return {
@@ -35835,6 +36000,11 @@ class DropzoneDirective extends FieldStateControlDirective {
             const labels = this.dropzoneLabels();
             untracked(() => channel?.labels.set(labels));
         });
+        effect(() => {
+            const channel = this.fileValidation();
+            const constraints = this.fileConstraints();
+            untracked(() => channel?.effectiveConstraints.set(constraints));
+        });
         effect(() => {
             const incoming = this.value();
             untracked(() => this.reconcileValue(incoming));
@@ -36219,6 +36389,11 @@ class DropzoneComponent {
                     messages.push(this.uploadErrorMessage()?.(entry) ?? this.defaultUploadErrorMessage(entry));
                 }
             }
+            const labels = this.resolvedLabels();
+            const constraints = this.dropzoneDir.fileConstraints();
+            for (const rejection of this.dropzoneDir.unhandledRejections()) {
+                messages.push(rejectionMessage(rejection, { constraints, labels }));
+            }
             return messages;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "internalErrorMessages" }] : /* istanbul ignore next */ []));
@@ -36699,22 +36874,25 @@ class CounterComponent {
          * The limit to count towards. Wins over the schema's `maxLength()` - use it for a control whose
          * length isn't schema-validated, or to count towards a softer limit than the one that validates.
          */
-        this.max = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute$1 });
         /** Measures the control's value. Override for a value type the default can't count. */
         this.lengthOf = input(defaultLengthOf, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "lengthOf" }] : /* istanbul ignore next */ []));
         /** The limit actually in effect: the explicit `[max]`, else the bound field's `maxLength()`. */
         this.resolvedMax = computed(() => this.max() ?? this.formField?.controlMaxLength(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
-        /** The current length of the control's value. */
-        this.current = computed(() => this.lengthOf()(this.formField?.controlValue() ?? null), /* @ts-ignore */
+        this.controlMixed = computed(() => this.formField?.registeredControl()?.mixed?.() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlMixed" }] : /* istanbul ignore next */ []));
+        /** The current length of the control's value - `0` while mixed, so the hidden raw value never shows. */
+        this.current = computed(() => (this.controlMixed() ? 0 : this.lengthOf()(this.formField?.controlValue() ?? null)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
         /**
          * Whether the value is past the limit. With a schema `maxLength()` this is the control's own
          * validation error.
          */
         this.isOverLimit = computed(() => {
+            if (this.controlMixed())
+                return false;
             const explicitMax = this.max();
             if (explicitMax !== undefined) {
                 return this.current() > explicitMax;
@@ -36908,7 +37086,7 @@ class NumberInputComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NumberInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NumberInputComponent, isStandalone: true, selector: "et-number-input", inputs: { stepper: { classPropertyName: "stepper", publicName: "stepper", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "numberInputDir.activate()" }, properties: { "attr.data-stepper": "stepper() || null" }, classAttribute: "et-number-input" }, providers: [provideIcons(MINUS_ICON, PLUS_ICON)], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NumberInputDirective, inputs: ["min", "min", "max", "max", "step", "step", "decimals", "decimals", "parseErrorMessage", "parseErrorMessage", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "touched", "touched", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "warnings", "warnings", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [value]=\"numberInputDir.displayValue()\"\n  [disabled]=\"numberInputDir.disabled()\"\n  [readOnly]=\"numberInputDir.readonly()\"\n  [required]=\"numberInputDir.required()\"\n  [placeholder]=\"numberInputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"numberInputDir.autocomplete() || null\"\n  [attr.min]=\"numberInputDir.min() ?? null\"\n  [attr.max]=\"numberInputDir.max() ?? null\"\n  [attr.step]=\"numberInputDir.step() ?? null\"\n  [attr.inputmode]=\"numberInputDir.inputMode()\"\n  [attr.name]=\"numberInputDir.name() || null\"\n  [attr.aria-invalid]=\"numberInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"numberInputDir.describedBy() || null\"\n  [attr.aria-label]=\"numberInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"numberInputDir.labelId() || null\"\n  [attr.data-text-align]=\"numberInputDir.textAlign()\"\n  (focus)=\"numberInputDir.focused.set(true)\"\n  (blur)=\"numberInputDir.focused.set(false); numberInputDir.touched.set(true)\"\n  class=\"et-number-input-native\"\n  type=\"number\"\n/>\n\n@if (stepper()) {\n  <div class=\"et-number-input-stepper\">\n    <button\n      [attr.aria-label]=\"resolvedDecrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepDown()\"\n      (pointerdown)=\"startStepRepeat($event, -1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-minus\"></i>\n    </button>\n    <button\n      [attr.aria-label]=\"resolvedIncrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepUp()\"\n      (pointerdown)=\"startStepRepeat($event, 1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-plus\"></i>\n    </button>\n  </div>\n}\n", styles: ["@layer components{html.et-number-input-scrubbing,html.et-number-input-scrubbing *{cursor:ew-resize!important}@property --et-number-input-stepper-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-number-input{display:block;flex:1;min-inline-size:0;color:inherit}et-number-input[data-stepper]{display:flex;align-items:center;gap:8px}et-number-input .et-number-input-stepper{display:flex;align-items:center;gap:2px;flex:none}et-number-input .et-number-input-stepper-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-number-input-stepper-size) + 8px);block-size:calc(var(--et-number-input-stepper-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none;touch-action:none}@media(pointer:fine){et-number-input .et-number-input-stepper-button{cursor:ew-resize}}et-number-input .et-number-input-stepper-button .et-icon{inline-size:var(--et-number-input-stepper-size);block-size:var(--et-number-input-stepper-size)}@media(hover:hover){et-number-input .et-number-input-stepper-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}et-number-input .et-number-input-stepper-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}et-number-input .et-number-input-stepper-button:disabled{cursor:default;background:transparent;color:inherit;opacity:.4}et-number-input .et-number-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0;appearance:textfield}et-number-input .et-number-input-native::-webkit-outer-spin-button,et-number-input .et-number-input-native::-webkit-inner-spin-button{appearance:none;margin:0}et-number-input .et-number-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-number-input .et-number-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-number-input .et-number-input-native[data-text-align=start]{text-align:start}et-number-input .et-number-input-native[data-text-align=center]{text-align:center}et-number-input .et-number-input-native[data-text-align=end]{text-align:end}et-number-input[data-mixed] .et-number-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NumberInputComponent, isStandalone: true, selector: "et-number-input", inputs: { stepper: { classPropertyName: "stepper", publicName: "stepper", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "numberInputDir.activate()" }, properties: { "attr.data-stepper": "stepper() || null" }, classAttribute: "et-number-input" }, providers: [provideIcons(MINUS_ICON, PLUS_ICON)], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], hostDirectives: [{ directive: NumberInputDirective, inputs: ["min", "min", "max", "max", "step", "step", "decimals", "decimals", "parseErrorMessage", "parseErrorMessage", "placeholder", "placeholder", "autocomplete", "autocomplete", "textAlign", "textAlign", "value", "value", "touched", "touched", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "warnings", "warnings", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<input\n  #nativeInput\n  [disabled]=\"numberInputDir.disabled()\"\n  [readOnly]=\"numberInputDir.readonly()\"\n  [required]=\"numberInputDir.required()\"\n  [placeholder]=\"numberInputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"numberInputDir.autocomplete() || null\"\n  [attr.min]=\"numberInputDir.min() ?? null\"\n  [attr.max]=\"numberInputDir.max() ?? null\"\n  [attr.step]=\"numberInputDir.step() ?? null\"\n  [attr.inputmode]=\"numberInputDir.inputMode()\"\n  [attr.name]=\"numberInputDir.name() || null\"\n  [attr.aria-invalid]=\"numberInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"numberInputDir.describedBy() || null\"\n  [attr.aria-label]=\"numberInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"numberInputDir.labelId() || null\"\n  [attr.data-text-align]=\"numberInputDir.textAlign()\"\n  (focus)=\"numberInputDir.focused.set(true)\"\n  (blur)=\"numberInputDir.focused.set(false); numberInputDir.touched.set(true); numberInputDir.normalizeNativeText()\"\n  class=\"et-number-input-native\"\n  type=\"number\"\n/>\n\n@if (stepper()) {\n  <div class=\"et-number-input-stepper\">\n    <button\n      [attr.aria-label]=\"resolvedDecrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepDown()\"\n      (pointerdown)=\"startStepRepeat($event, -1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-minus\"></i>\n    </button>\n    <button\n      [attr.aria-label]=\"resolvedIncrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepUp()\"\n      (pointerdown)=\"startStepRepeat($event, 1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-plus\"></i>\n    </button>\n  </div>\n}\n", styles: ["@layer components{html.et-number-input-scrubbing,html.et-number-input-scrubbing *{cursor:ew-resize!important}@property --et-number-input-stepper-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-number-input{display:block;flex:1;min-inline-size:0;color:inherit}et-number-input[data-stepper]{display:flex;align-items:center;gap:8px}et-number-input .et-number-input-stepper{display:flex;align-items:center;gap:2px;flex:none}et-number-input .et-number-input-stepper-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-number-input-stepper-size) + 8px);block-size:calc(var(--et-number-input-stepper-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none;touch-action:none}@media(pointer:fine){et-number-input .et-number-input-stepper-button{cursor:ew-resize}}et-number-input .et-number-input-stepper-button .et-icon{inline-size:var(--et-number-input-stepper-size);block-size:var(--et-number-input-stepper-size)}@media(hover:hover){et-number-input .et-number-input-stepper-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}et-number-input .et-number-input-stepper-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}et-number-input .et-number-input-stepper-button:disabled{cursor:default;background:transparent;color:inherit;opacity:.4}et-number-input .et-number-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0;appearance:textfield}et-number-input .et-number-input-native::-webkit-outer-spin-button,et-number-input .et-number-input-native::-webkit-inner-spin-button{appearance:none;margin:0}et-number-input .et-number-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-number-input .et-number-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-number-input .et-number-input-native[data-text-align=start]{text-align:start}et-number-input .et-number-input-native[data-text-align=center]{text-align:center}et-number-input .et-number-input-native[data-text-align=end]{text-align:end}et-number-input[data-mixed] .et-number-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
@@ -36934,7 +37112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'et-number-input',
                         '[attr.data-stepper]': 'stepper() || null',
                         '(click)': 'numberInputDir.activate()',
-                    }, template: "<input\n  #nativeInput\n  [value]=\"numberInputDir.displayValue()\"\n  [disabled]=\"numberInputDir.disabled()\"\n  [readOnly]=\"numberInputDir.readonly()\"\n  [required]=\"numberInputDir.required()\"\n  [placeholder]=\"numberInputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"numberInputDir.autocomplete() || null\"\n  [attr.min]=\"numberInputDir.min() ?? null\"\n  [attr.max]=\"numberInputDir.max() ?? null\"\n  [attr.step]=\"numberInputDir.step() ?? null\"\n  [attr.inputmode]=\"numberInputDir.inputMode()\"\n  [attr.name]=\"numberInputDir.name() || null\"\n  [attr.aria-invalid]=\"numberInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"numberInputDir.describedBy() || null\"\n  [attr.aria-label]=\"numberInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"numberInputDir.labelId() || null\"\n  [attr.data-text-align]=\"numberInputDir.textAlign()\"\n  (focus)=\"numberInputDir.focused.set(true)\"\n  (blur)=\"numberInputDir.focused.set(false); numberInputDir.touched.set(true)\"\n  class=\"et-number-input-native\"\n  type=\"number\"\n/>\n\n@if (stepper()) {\n  <div class=\"et-number-input-stepper\">\n    <button\n      [attr.aria-label]=\"resolvedDecrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepDown()\"\n      (pointerdown)=\"startStepRepeat($event, -1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-minus\"></i>\n    </button>\n    <button\n      [attr.aria-label]=\"resolvedIncrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepUp()\"\n      (pointerdown)=\"startStepRepeat($event, 1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-plus\"></i>\n    </button>\n  </div>\n}\n", styles: ["@layer components{html.et-number-input-scrubbing,html.et-number-input-scrubbing *{cursor:ew-resize!important}@property --et-number-input-stepper-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-number-input{display:block;flex:1;min-inline-size:0;color:inherit}et-number-input[data-stepper]{display:flex;align-items:center;gap:8px}et-number-input .et-number-input-stepper{display:flex;align-items:center;gap:2px;flex:none}et-number-input .et-number-input-stepper-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-number-input-stepper-size) + 8px);block-size:calc(var(--et-number-input-stepper-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none;touch-action:none}@media(pointer:fine){et-number-input .et-number-input-stepper-button{cursor:ew-resize}}et-number-input .et-number-input-stepper-button .et-icon{inline-size:var(--et-number-input-stepper-size);block-size:var(--et-number-input-stepper-size)}@media(hover:hover){et-number-input .et-number-input-stepper-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}et-number-input .et-number-input-stepper-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}et-number-input .et-number-input-stepper-button:disabled{cursor:default;background:transparent;color:inherit;opacity:.4}et-number-input .et-number-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0;appearance:textfield}et-number-input .et-number-input-native::-webkit-outer-spin-button,et-number-input .et-number-input-native::-webkit-inner-spin-button{appearance:none;margin:0}et-number-input .et-number-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-number-input .et-number-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-number-input .et-number-input-native[data-text-align=start]{text-align:start}et-number-input .et-number-input-native[data-text-align=center]{text-align:center}et-number-input .et-number-input-native[data-text-align=end]{text-align:end}et-number-input[data-mixed] .et-number-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"] }]
+                    }, template: "<input\n  #nativeInput\n  [disabled]=\"numberInputDir.disabled()\"\n  [readOnly]=\"numberInputDir.readonly()\"\n  [required]=\"numberInputDir.required()\"\n  [placeholder]=\"numberInputDir.effectivePlaceholder()\"\n  [attr.autocomplete]=\"numberInputDir.autocomplete() || null\"\n  [attr.min]=\"numberInputDir.min() ?? null\"\n  [attr.max]=\"numberInputDir.max() ?? null\"\n  [attr.step]=\"numberInputDir.step() ?? null\"\n  [attr.inputmode]=\"numberInputDir.inputMode()\"\n  [attr.name]=\"numberInputDir.name() || null\"\n  [attr.aria-invalid]=\"numberInputDir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"numberInputDir.describedBy() || null\"\n  [attr.aria-label]=\"numberInputDir.ariaLabel() || null\"\n  [attr.aria-labelledby]=\"numberInputDir.labelId() || null\"\n  [attr.data-text-align]=\"numberInputDir.textAlign()\"\n  (focus)=\"numberInputDir.focused.set(true)\"\n  (blur)=\"numberInputDir.focused.set(false); numberInputDir.touched.set(true); numberInputDir.normalizeNativeText()\"\n  class=\"et-number-input-native\"\n  type=\"number\"\n/>\n\n@if (stepper()) {\n  <div class=\"et-number-input-stepper\">\n    <button\n      [attr.aria-label]=\"resolvedDecrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepDown()\"\n      (pointerdown)=\"startStepRepeat($event, -1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-minus\"></i>\n    </button>\n    <button\n      [attr.aria-label]=\"resolvedIncrementLabel()\"\n      [disabled]=\"!numberInputDir.canStepUp()\"\n      (pointerdown)=\"startStepRepeat($event, 1)\"\n      (pointerup)=\"stopStepRepeat()\"\n      (pointercancel)=\"stopStepRepeat()\"\n      (lostpointercapture)=\"stopStepRepeat()\"\n      class=\"et-number-input-stepper-button\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <i aria-hidden=\"true\" etIcon=\"et-plus\"></i>\n    </button>\n  </div>\n}\n", styles: ["@layer components{html.et-number-input-scrubbing,html.et-number-input-scrubbing *{cursor:ew-resize!important}@property --et-number-input-stepper-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-number-input{display:block;flex:1;min-inline-size:0;color:inherit}et-number-input[data-stepper]{display:flex;align-items:center;gap:8px}et-number-input .et-number-input-stepper{display:flex;align-items:center;gap:2px;flex:none}et-number-input .et-number-input-stepper-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:calc(var(--et-number-input-stepper-size) + 8px);block-size:calc(var(--et-number-input-stepper-size) + 8px);padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none;touch-action:none}@media(pointer:fine){et-number-input .et-number-input-stepper-button{cursor:ew-resize}}et-number-input .et-number-input-stepper-button .et-icon{inline-size:var(--et-number-input-stepper-size);block-size:var(--et-number-input-stepper-size)}@media(hover:hover){et-number-input .et-number-input-stepper-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 12%,transparent);color:var(--et-surface-color-solid, currentColor)}}et-number-input .et-number-input-stepper-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent)}et-number-input .et-number-input-stepper-button:disabled{cursor:default;background:transparent;color:inherit;opacity:.4}et-number-input .et-number-input-native{display:block;inline-size:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);padding:0;min-width:0;appearance:textfield}et-number-input .et-number-input-native::-webkit-outer-spin-button,et-number-input .et-number-input-native::-webkit-inner-spin-button{appearance:none;margin:0}et-number-input .et-number-input-native:not(:focus){overflow:hidden;text-overflow:ellipsis}et-number-input .et-number-input-native::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-number-input .et-number-input-native[data-text-align=start]{text-align:start}et-number-input .et-number-input-native[data-text-align=center]{text-align:center}et-number-input .et-number-input-native[data-text-align=end]{text-align:end}et-number-input[data-mixed] .et-number-input-native::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { stepper: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepper", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }], nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }] } });
 
 class PasswordInputComponent {
@@ -37198,7 +37376,8 @@ const findLanguagesError = (languages) => {
  * ```
  */
 const requiredLanguages = (path, { codes, message }) => validate(path, ({ value }) => {
-    const missing = (typeof codes === 'function' ? codes() : codes).filter((code) => (value()[code] ?? '').trim().length === 0);
+    const record = value() ?? {};
+    const missing = (typeof codes === 'function' ? codes() : codes).filter((code) => (record[code] ?? '').trim().length === 0);
     if (missing.length === 0)
         return undefined;
     const text = typeof message === 'function' ? message(missing) : (message ?? `Missing translations: ${missing.join(', ')}`);
@@ -39278,6 +39457,31 @@ const HTML_ATTRIBUTE = /(\s+)([^\s/>=]+)((?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?
 const renameStyleAttribute = (attribute, ...[space, name, value]) => name?.toLowerCase() === 'style' ? `${space}${INERT_STYLE_ATTRIBUTE}${value}` : attribute;
 const renameStyleAttributes = (html) => html.replace(HTML_START_TAG, (tag) => tag.replace(HTML_ATTRIBUTE, renameStyleAttribute));
 const restoreStyleAttributes = (html) => html.replaceAll(` ${INERT_STYLE_ATTRIBUTE}="`, ' style="');
+const stripPastedAlignment = (body, renderer) => {
+    // eslint-disable-next-line ethlete/no-dom-query -- parsed clipboard document, not the editor's DOM
+    for (const el of body.querySelectorAll(`[${INERT_STYLE_ATTRIBUTE}], [class*="${ALIGN_CLASS_PREFIX}"]`)) {
+        renderer.removeAttribute(el, INERT_STYLE_ATTRIBUTE);
+        for (const name of [...el.classList]) {
+            if (name.startsWith(ALIGN_CLASS_PREFIX))
+                renderer.removeClass(el, name);
+        }
+    }
+};
+const takeTextBeforeCaret = (editable, text) => {
+    if (!editable?.range.collapsed)
+        return null;
+    const { startContainer: node, startOffset: end } = editable.range;
+    if (node.nodeType !== Node.TEXT_NODE || !node.data.slice(0, end).endsWith(text))
+        return null;
+    const start = end - text.length;
+    node.deleteData(start, text.length);
+    editable.selection.collapse(node, start);
+    return () => {
+        node.insertData(start, text);
+        editable.selection.collapse(node, end);
+    };
+};
+const AUTOFORMAT_CHARS = ' *_~`';
 const collectTextNodes = (root) => {
     const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_TEXT);
     const nodes = [];
@@ -39503,7 +39707,7 @@ class RichTextEditorDirective extends FieldStateControlDirective {
             const markdown = this.value() ?? '';
             if (markdown === this.lastEmittedMarkdown)
                 return;
-            this.renderExternalValue(markdown);
+            untracked(() => this.renderExternalValue(markdown));
         });
     }
     /**
@@ -39583,9 +39787,15 @@ class RichTextEditorDirective extends FieldStateControlDirective {
     }
     /** @internal Restarts the history: an outside write is a new document, so undo must not reach back into the previous one's states. */
     renderExternalValue(markdown = this.value() ?? '') {
+        const root = this.editorDom.root();
+        const caret = root && root.ownerDocument.activeElement === root ? this.editorDom.readSelectionOffsets() : null;
         if (!this.writeValueToDom(markdown))
             return;
         this.history.reset(markdown);
+        this.pendingMarks.set(null);
+        if (caret)
+            this.editorDom.restoreSelectionOffsets(caret);
+        this.refreshActiveMarks();
     }
     refreshActiveMarks() {
         const pending = this.pendingMarks();
@@ -39771,6 +39981,8 @@ class RichTextEditorDirective extends FieldStateControlDirective {
         const body = new DOMParser().parseFromString(renameStyleAttributes(html), 'text/html').body;
         // eslint-disable-next-line ethlete/no-dom-query -- clipboard HTML (e.g. from Word) embeds <style> blocks whose CSS text would survive the tag-strip as plain text
         body.querySelectorAll('style, script, noscript, meta, link, title').forEach((junk) => junk.remove());
+        if (!this.toolDefs.has(RICH_TEXT_EDITOR_TOOLS.ALIGN))
+            stripPastedAlignment(body, this.renderer);
         if (this.editorDom.markStates()?.codeBlock)
             return this.pasteIntoCodeBlock(clipboardPlainText(body));
         const codec = this.tokenCodec();
@@ -39851,7 +40063,11 @@ class RichTextEditorDirective extends FieldStateControlDirective {
     }
     listenToEditable(element) {
         const listeners = [
-            this.renderer.listen(element, 'input', () => this.syncFromDom()),
+            this.renderer.listen(element, 'input', (event) => {
+                if (!event.isComposing)
+                    this.syncFromDom();
+            }),
+            this.renderer.listen(element, 'compositionend', (event) => this.finishComposition(event.data)),
             this.renderer.listen(element, 'beforeinput', (event) => this.interceptBeforeInput(event)),
             this.renderer.listen(element, 'keydown', (event) => this.interceptKeydown(event)),
             this.renderer.listen(element, 'paste', (event) => this.interceptPaste(event)),
@@ -39868,6 +40084,9 @@ class RichTextEditorDirective extends FieldStateControlDirective {
         return () => listeners.forEach((off) => off());
     }
     interceptKeydown(event) {
+        // The keystrokes of an IME composition (Safari reports its commit as Enter) belong to the IME.
+        if (event.isComposing || event.keyCode === 229)
+            return;
         // History first, and always prevented: the native contenteditable undo stack must never run,
         // since paste normalization and autoformat rewrite the DOM behind its back and it would restore
         // a state the value model never had. Ctrl/Cmd+Z undoes, Ctrl+Y and Ctrl/Cmd+Shift+Z redo.
@@ -40017,6 +40236,7 @@ class RichTextEditorDirective extends FieldStateControlDirective {
                 this.redo();
                 break;
             case 'insertText':
+            case 'insertFromComposition':
                 if (event.data !== null && this.handleAutoformat(event.data)) {
                     event.preventDefault();
                     break;
@@ -40027,6 +40247,23 @@ class RichTextEditorDirective extends FieldStateControlDirective {
                 break;
         }
     }
+    finishComposition(data) {
+        if (!this.canEdit())
+            return;
+        const pending = this.pendingMarks();
+        if (pending !== null && data && takeTextBeforeCaret(this.editorDom.getSelection(), data)) {
+            this.pendingMarks.set(null);
+            this.runCommand(() => this.editorDom.insertInlineText(data, pending));
+            return;
+        }
+        const last = data.at(-1);
+        const restore = last && AUTOFORMAT_CHARS.includes(last) && takeTextBeforeCaret(this.editorDom.getSelection(), last);
+        if (restore && last && this.handleAutoformat(last))
+            return;
+        if (restore)
+            restore();
+        this.syncFromDom();
+    }
     warnAboutMissingTools() {
         const warned = new Set();
         effect(() => {
@@ -40825,6 +41062,8 @@ class RichTextEditorTriggersDirective {
         this.openOrReposition();
     }
     interceptPopupKeys(event) {
+        if (event.isComposing || event.keyCode === 229)
+            return;
         if (event.key === 'Backspace' && this.deletePrecedingChip()) {
             event.preventDefault();
             event.stopPropagation();
@@ -41443,7 +41682,9 @@ class MenuDirective {
             if (this.parent?.openSubmenu() === this) {
                 this.parent.openSubmenu.set(null);
             }
-            this.overlayRef()?.close();
+            const overlayRef = this.overlayRef();
+            this.overlayRef.set(null);
+            overlayRef?.close();
         });
         if (ngDevMode) {
             afterNextRender(() => {
@@ -41596,7 +41837,8 @@ class MenuDirective {
             case 'ArrowLeft': {
                 const opensSubmenu = (event.key === 'ArrowRight') !== this.isRtl();
                 if (opensSubmenu) {
-                    const submenu = this.activeItem()?.submenu ?? null;
+                    const activeItem = this.activeItem();
+                    const submenu = activeItem && !activeItem.isDisabled() ? activeItem.submenu : null;
                     if (submenu) {
                         event.preventDefault();
                         submenu.show({ source: 'keyboard' });
@@ -41627,13 +41869,23 @@ class MenuDirective {
                 if (searchFocused) {
                     return;
                 }
+                if (event.key === ' ' && !search && this.typeahead.isRunning()) {
+                    const match = this.findTypeaheadMatch(this.typeahead.append(event.key));
+                    event.preventDefault();
+                    if (match) {
+                        this.setActiveItem(match);
+                    }
+                    return;
+                }
                 const item = this.activeItem();
                 if (!item) {
                     return;
                 }
                 event.preventDefault();
                 if (item.submenu) {
-                    item.submenu.show({ source: 'keyboard' });
+                    if (!item.isDisabled()) {
+                        item.submenu.show({ source: 'keyboard' });
+                    }
                 }
                 else {
                     item.activateFromKeyboard(event.key === 'Enter' ? 'keyboard-enter' : 'keyboard-space');
@@ -41768,22 +42020,25 @@ class MenuDirective {
             return;
         }
         const current = this.activeItem();
-        const index = current ? items.indexOf(current) : -1;
-        if (index === -1) {
+        const sorted = this.sortedItems();
+        const position = current ? sorted.indexOf(current) : -1;
+        if (position === -1) {
             this.setActiveToEdge(delta === 1 ? 'first' : 'last');
             return;
         }
-        const nextIndex = index + delta;
-        if (search && (nextIndex < 0 || nextIndex >= items.length)) {
+        let next;
+        for (let index = position + delta; index >= 0 && index < sorted.length && !next; index += delta) {
+            next = sorted[index]?.isDisabled() ? undefined : sorted[index];
+        }
+        if (!next && search) {
             this.activeItem.set(null);
             search.focus();
             return;
         }
-        if (!this.loop() && (nextIndex < 0 || nextIndex >= items.length)) {
+        if (!next && !this.loop()) {
             return;
         }
-        const wrappedIndex = (nextIndex + items.length) % items.length;
-        const next = items[wrappedIndex];
+        next ??= delta === 1 ? items[0] : items.at(-1);
         if (next) {
             this.setActiveItem(next);
         }
@@ -41833,6 +42088,15 @@ class MenuDirective {
         };
         const overlayRef = this.overlayManager.open(OverlayTemplateHostComponent, config);
         this.overlayRef.set(overlayRef);
+        overlayRef
+            .beforeClosed()
+            .pipe(take(1), tap(() => {
+            if (this.overlayRef() === overlayRef && this.open()) {
+                this.openSubmenu()?.hide();
+                this.open.set(false);
+            }
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
         if (this.isRoot) {
             this.attachRootInteractionListeners();
         }
@@ -42270,7 +42534,7 @@ class MenuItemDirective {
                 return -1;
             }
             const active = owner.activeItem();
-            if (active) {
+            if (active && !active.isDisabled()) {
                 return active === this ? 0 : -1;
             }
             return owner.enabledItems()[0] === this ? 0 : -1;
@@ -47380,6 +47644,34 @@ const createVirtualWindow = (config) => {
     const containerDimensions = signalElementDimensions(config.container);
     const viewportSize = computed(() => containerDimensions().client?.height ?? 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
+    const extras = computed(() => [...(config.extraItemHeights?.() ?? new Map())]
+        .filter(([, height]) => height > 0)
+        .sort(([a], [b]) => a - b), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extras" }] : /* istanbul ignore next */ []));
+    const totalExtra = computed(() => extras().reduce((sum, [, height]) => sum + height, 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalExtra" }] : /* istanbul ignore next */ []));
+    const extraBefore = (index) => {
+        let sum = 0;
+        for (const [extraIndex, height] of extras()) {
+            if (extraIndex >= index)
+                break;
+            sum += height;
+        }
+        return sum;
+    };
+    const topOf = (index) => index * itemHeight() + extraBefore(index);
+    // `floor` finds the item an offset falls on, `ceil` the end of the range an edge at that offset closes.
+    const indexAt = (offset, round) => {
+        const height = itemHeight();
+        let before = 0;
+        for (const [extraIndex, extra] of extras()) {
+            if (offset < extraIndex * height + before + height + extra) {
+                return Math.min(round((offset - before) / height), round === Math.ceil ? extraIndex + 1 : extraIndex);
+            }
+            before += extra;
+        }
+        return round((offset - before) / height);
+    };
     // a scroll request that arrived before the container existed (e.g. scrolling the selected
     // option into view while the panel is still mounting) - replayed once it does
     let pendingScrollIndex = null;
@@ -47389,10 +47681,9 @@ const createVirtualWindow = (config) => {
             pendingScrollIndex = index;
             return;
         }
-        const height = itemHeight();
         const viewport = viewportSize() || FALLBACK_VIEWPORT_SIZE;
-        const rowTop = index * height;
-        const rowBottom = rowTop + height;
+        const rowTop = topOf(index);
+        const rowBottom = rowTop + itemHeight();
         const current = container.scrollTop;
         let next = current;
         if (rowTop < current) {
@@ -47429,21 +47720,20 @@ const createVirtualWindow = (config) => {
         if (!count || !config.container()) {
             return { start: 0, end: count };
         }
-        const height = itemHeight();
         const viewport = viewportSize() || FALLBACK_VIEWPORT_SIZE;
         const offset = scrollOffset();
         // clamp into the item range: when the count shrinks while scrolled far down (filtering a
         // long list), the stale offset would otherwise start past the end - the browser's own
         // clamp-scroll event arrives a frame later, but the window must never be empty until then
         const rows = overscan();
-        const start = Math.min(Math.max(0, Math.floor(offset / height) - rows), Math.max(0, count - 1));
-        const end = Math.min(count, Math.max(Math.ceil((offset + viewport) / height) + rows, start + 1));
+        const start = Math.min(Math.max(0, indexAt(offset, Math.floor) - rows), Math.max(0, count - 1));
+        const end = Math.min(count, Math.max(indexAt(offset + viewport, Math.ceil) + rows, start + 1));
         return { start, end };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
-    const paddingTop = computed(() => range().start * itemHeight(), /* @ts-ignore */
+    const paddingTop = computed(() => topOf(range().start), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paddingTop" }] : /* istanbul ignore next */ []));
-    const paddingBottom = computed(() => Math.max(0, (config.itemCount() - range().end) * itemHeight()), /* @ts-ignore */
+    const paddingBottom = computed(() => Math.max(0, config.itemCount() * itemHeight() + totalExtra() - topOf(range().end)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paddingBottom" }] : /* istanbul ignore next */ []));
     const measureItem = (element) => {
         const height = element.offsetHeight;
@@ -47546,6 +47836,12 @@ class SelectDirective extends FieldStateControlDirective {
          */
         this.valueKey = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+        /**
+         * Labels a value no loaded option carries (e.g. a stored id whose option is on a page not yet
+         * fetched): the trigger text in single mode, the chip label in multi mode.
+         */
+        this.displayWith = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayWith" }] : /* istanbul ignore next */ []));
         this.filterModeInput = input(SELECT_FILTER_MODES.INTERNAL, { ...(ngDevMode ? { debugName: "filterModeInput" } : /* istanbul ignore next */ {}), alias: 'filterMode' });
         /** Enter with a search query that matches no option commits the raw query string as the value. */
         this.allowCustomValues = input(false, { ...(ngDevMode ? { debugName: "allowCustomValues" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -47959,11 +48255,13 @@ class SelectDirective extends FieldStateControlDirective {
             const items = this.sortedItems();
             const cache = this.labelCache();
             const valuesMatch = this.valuesMatch();
+            const displayWith = this.displayWith();
             return values.map((entryValue) => {
                 const item = items.find((candidate) => valuesMatch(candidate.value(), entryValue)) ?? null;
                 const label = item?.label() ||
                     this.findCachedLabel(cache, entryValue) ||
-                    (typeof entryValue === 'string' ? entryValue : null);
+                    displayWith?.(entryValue) ||
+                    (typeof entryValue === 'string' && entryValue !== '' ? entryValue : null);
                 return { value: entryValue, label, item };
             });
         }, /* @ts-ignore */
@@ -48339,7 +48637,7 @@ class SelectDirective extends FieldStateControlDirective {
     }
     /** @internal A rendered virtual row attaches its element to its item while it is windowed in. */
     attachVirtualOptionElement(item, element) {
-        const entry = this.dataItemRegistry.get(item.value());
+        const entry = this.dataItemRegistry.get(this.valueIdentity()(item.value()));
         if (!entry || entry.item !== item) {
             return;
         }
@@ -48352,7 +48650,7 @@ class SelectDirective extends FieldStateControlDirective {
     }
     /** @internal */
     detachVirtualOptionElement(item, element) {
-        const entry = this.dataItemRegistry.get(item.value());
+        const entry = this.dataItemRegistry.get(this.valueIdentity()(item.value()));
         if (!entry || entry.item !== item || entry.element() !== element) {
             return;
         }
@@ -48553,7 +48851,7 @@ class SelectDirective extends FieldStateControlDirective {
                 return;
             }
             default: {
-                if (event.key.length !== 1 || searchFocused || this.multiple()) {
+                if (event.key.length !== 1 || searchFocused || this.multiple() || this.pickOnly()) {
                     return;
                 }
                 const match = this.findTypeaheadMatch(event.key, this.selectedItems()[0] ?? null);
@@ -48585,6 +48883,10 @@ class SelectDirective extends FieldStateControlDirective {
         if (value === null) {
             return false;
         }
+        const matchingOption = this.findOptionByLabel(value);
+        if (matchingOption) {
+            return this.commitMatchingOption(matchingOption);
+        }
         this.labelCache.update((cache) => new Map(cache).set(value, value));
         if (this.multiple()) {
             const current = this.value();
@@ -48602,6 +48904,37 @@ class SelectDirective extends FieldStateControlDirective {
         }
         return true;
     }
+    findOptionByLabel(label) {
+        const lowered = label.toLowerCase();
+        return this.visibleItems().find((item) => !item.custom?.() && !item.disabled() && item.label().toLowerCase() === lowered);
+    }
+    commitMatchingOption(item) {
+        if (this.mixed()) {
+            const committed = this.commitMixedOption(item);
+            if (committed && this.multiple()) {
+                this.registeredSearch()?.clear();
+            }
+            return committed;
+        }
+        if (!this.multiple()) {
+            this.pickSingleOption(item);
+            return true;
+        }
+        const current = this.value();
+        const values = Array.isArray(current) ? current : [];
+        const itemValue = item.value();
+        if (this.includesValue(values, itemValue)) {
+            return false;
+        }
+        if (this.pickOnly()) {
+            this.pickOption.emit(itemValue);
+        }
+        else {
+            this.writeValue([...values, itemValue]);
+        }
+        this.registeredSearch()?.clear();
+        return true;
+    }
     commitOptionWhileClosed(item) {
         if (this.disabled() || this.readonly() || item.disabled()) {
             return;
@@ -48610,6 +48943,9 @@ class SelectDirective extends FieldStateControlDirective {
             this.commitMixedOption(item);
             return;
         }
+        if (this.selectedItems()[0] === item) {
+            return;
+        }
         this.pickSingleOption(item);
     }
     findTypeaheadMatch(character, from) {
@@ -48740,7 +49076,7 @@ class SelectDirective extends FieldStateControlDirective {
         this.hide();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: SelectDirective, isStandalone: true, selector: "[etSelect]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, filterModeInput: { classPropertyName: "filterModeInput", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValues: { classPropertyName: "allowCustomValues", publicName: "allowCustomValues", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, normalizeValue: { classPropertyName: "normalizeValue", publicName: "normalizeValue", isSignal: true, isRequired: false, transformFunction: null }, commitCustomValueOnClose: { classPropertyName: "commitCustomValueOnClose", publicName: "commitCustomValueOnClose", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, allowAddNew: { classPropertyName: "allowAddNew", publicName: "allowAddNew", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadErrorInput: { classPropertyName: "loadErrorInput", publicName: "loadError", isSignal: true, isRequired: false, transformFunction: null }, hasMoreItemsInput: { classPropertyName: "hasMoreItemsInput", publicName: "hasMoreItems", isSignal: true, isRequired: false, transformFunction: null }, mirrorPanelWidth: { classPropertyName: "mirrorPanelWidth", publicName: "mirrorPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, pickOnly: { classPropertyName: "pickOnly", publicName: "pickOnly", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mixed: "mixedChange", touched: "touchedChange", open: "openChange", touch: "touch", queryChange: "queryChange", loadMore: "loadMore", addNew: "addNew", pickOption: "pickOption", afterOpen: "afterOpen", afterClose: "afterClose" }, host: { properties: { "attr.data-select-open": "open() || null", "attr.data-mixed": "mixed() || null" } }, exportAs: ["etSelect"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: SelectDirective, isStandalone: true, selector: "[etSelect]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, filterModeInput: { classPropertyName: "filterModeInput", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, allowCustomValues: { classPropertyName: "allowCustomValues", publicName: "allowCustomValues", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, normalizeValue: { classPropertyName: "normalizeValue", publicName: "normalizeValue", isSignal: true, isRequired: false, transformFunction: null }, commitCustomValueOnClose: { classPropertyName: "commitCustomValueOnClose", publicName: "commitCustomValueOnClose", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, allowAddNew: { classPropertyName: "allowAddNew", publicName: "allowAddNew", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadErrorInput: { classPropertyName: "loadErrorInput", publicName: "loadError", isSignal: true, isRequired: false, transformFunction: null }, hasMoreItemsInput: { classPropertyName: "hasMoreItemsInput", publicName: "hasMoreItems", isSignal: true, isRequired: false, transformFunction: null }, mirrorPanelWidth: { classPropertyName: "mirrorPanelWidth", publicName: "mirrorPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, pickOnly: { classPropertyName: "pickOnly", publicName: "pickOnly", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mixed: "mixedChange", touched: "touchedChange", open: "openChange", touch: "touch", queryChange: "queryChange", loadMore: "loadMore", addNew: "addNew", pickOption: "pickOption", afterOpen: "afterOpen", afterClose: "afterClose" }, host: { properties: { "attr.data-select-open": "open() || null", "attr.data-mixed": "mixed() || null" } }, exportAs: ["etSelect"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectDirective, decorators: [{
             type: Directive,
@@ -48752,7 +49088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-mixed]': 'mixed() || null',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }, { type: i0.Output, args: ["mixedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mixedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixedLabel", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], filterModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], allowCustomValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValues", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], normalizeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalizeValue", required: false }] }], commitCustomValueOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitCustomValueOnClose", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], allowAddNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddNew", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadErrorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadError", required: false }] }], hasMoreItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMoreItems", required: false }] }], mirrorPanelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mirrorPanelWidth", required: false }] }], pickOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickOnly", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], addNew: [{ type: i0.Output, args: ["addNew"] }], pickOption: [{ type: i0.Output, args: ["pickOption"] }], afterOpen: [{ type: i0.Output, args: ["afterOpen"] }], afterClose: [{ type: i0.Output, args: ["afterClose"] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }, { type: i0.Output, args: ["mixedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mixedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixedLabel", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], filterModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], allowCustomValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValues", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], normalizeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalizeValue", required: false }] }], commitCustomValueOnClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "commitCustomValueOnClose", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], allowAddNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddNew", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadErrorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadError", required: false }] }], hasMoreItemsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMoreItems", required: false }] }], mirrorPanelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mirrorPanelWidth", required: false }] }], pickOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickOnly", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], addNew: [{ type: i0.Output, args: ["addNew"] }], pickOption: [{ type: i0.Output, args: ["pickOption"] }], afterOpen: [{ type: i0.Output, args: ["afterOpen"] }], afterClose: [{ type: i0.Output, args: ["afterClose"] }] } });
 
 /**
  * The "Select all" row of a multi select (`selectAll`). Place it first inside the listbox; it takes
@@ -49420,8 +49756,11 @@ class SelectSearchDirective {
         }
         event.preventDefault();
         this.clear();
-        for (const part of parts) {
-            select.commitCustomValue(part);
+        const refused = parts.filter((part) => part.trim() && !select.commitCustomValue(part));
+        const pending = refused.map((part) => part.trim()).join(' ');
+        if (pending) {
+            this.query.set(pending);
+            select.queryChange.emit(pending);
         }
     }
     handleFocus() {
@@ -49932,10 +50271,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 class SelectOptionComponent {
     constructor() {
+        this.option = inject(SelectOptionDirective);
         mountSelectOptionStyles();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SelectOptionComponent, isStandalone: true, selector: "et-select-option", host: { classAttribute: "et-select-option" }, providers: [provideIcons(CHECK_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectOptionDirective, inputs: ["value", "value", "label", "label", "disabled", "disabled", "customValueOption", "customValueOption"] }], ngImport: i0, template: "<span class=\"et-select-option-label\">\n  <ng-content />\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SelectOptionComponent, isStandalone: true, selector: "et-select-option", host: { classAttribute: "et-select-option" }, providers: [provideIcons(CHECK_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectOptionDirective, inputs: ["value", "value", "label", "label", "disabled", "disabled", "customValueOption", "customValueOption"] }], ngImport: i0, template: "<span class=\"et-select-option-label\">\n  <ng-content>{{ option.labelInput() }}</ng-content>\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
@@ -49946,7 +50286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-select-option',
-                    }, template: "<span class=\"et-select-option-label\">\n  <ng-content />\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n" }]
+                    }, template: "<span class=\"et-select-option-label\">\n  <ng-content>{{ option.labelInput() }}</ng-content>\n</span>\n\n<span class=\"et-select-option-check\">\n  <i etIcon=\"et-check\"></i>\n</span>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -50402,7 +50742,7 @@ class SelectComponent {
                     return () => injector.get(SelectDirective).focus({ preventScroll: true });
                 },
             },
-        ], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "options", "options", "compareWith", "compareWith", "valueKey", "valueKey", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "separators", "separators", "normalizeValue", "normalizeValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "loadError", "loadError", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly", "selectAll", "selectAll", "mirrorPanelWidth", "mirrorPanelWidth", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption", "afterOpen", "afterOpen", "afterClose", "afterClose"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n    @if (select.showSelectAll()) {\n      <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n    }\n\n    @if (select.options()) {\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.id()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div\n            [etProvideColor]=\"panelThemes.themes.error()\"\n            class=\"et-select-state et-select-state--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectAllOptionComponent, selector: "et-select-all-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: SemanticThemesDirective, selector: "[etSemanticThemes]", exportAs: ["etSemanticThemes"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "options", "options", "compareWith", "compareWith", "valueKey", "valueKey", "displayWith", "displayWith", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "separators", "separators", "normalizeValue", "normalizeValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "loadError", "loadError", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly", "selectAll", "selectAll", "mirrorPanelWidth", "mirrorPanelWidth", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby", "hidden", "hidden", "warnings", "warnings"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption", "afterOpen", "afterOpen", "afterClose", "afterClose"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"select.displayValue() === null || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n    @if (select.showSelectAll()) {\n      <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n    }\n\n    @if (select.options()) {\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.id()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div\n            [etProvideColor]=\"panelThemes.themes.error()\"\n            class=\"et-select-state et-select-state--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;min-block-size:1lh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectAllOptionComponent, selector: "et-select-all-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: SemanticThemesDirective, selector: "[etSemanticThemes]", exportAs: ["etSemanticThemes"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -50452,6 +50792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                                 'options',
                                 'compareWith',
                                 'valueKey',
+                                'displayWith',
                                 'filterMode',
                                 'allowCustomValues',
                                 'separators',
@@ -50485,7 +50826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         ColorInteractiveDirective,
                     ], host: {
                         class: 'et-select',
-                    }, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n    @if (select.showSelectAll()) {\n      <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n    }\n\n    @if (select.options()) {\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.id()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div\n            [etProvideColor]=\"panelThemes.themes.error()\"\n            class=\"et-select-state et-select-state--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"] }]
+                    }, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n     The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n  <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n    @if (select.mixed()) {\n      @if (showValueLabel()) {\n        <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n      }\n    } @else if (select.registeredValueTemplate(); as valueTemplate) {\n      @if (showCustomValue()) {\n        <div class=\"et-select-value-custom\">\n          <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n        </div>\n      }\n    } @else if (select.multiple() && select.selectedEntries().length) {\n      <div class=\"et-select-chips\">\n        @for (entry of select.selectedEntries(); track entry.value) {\n          <et-chip\n            [disabled]=\"select.disabled()\"\n            [removable]=\"!select.readonly() && !select.disabled()\"\n            (remove)=\"select.deselectValue(entry.value)\"\n          >\n            {{ entry.label }}\n          </et-chip>\n        }\n      </div>\n    }\n\n    @if (!select.mixed() && showValueLabel()) {\n      <span [attr.data-placeholder]=\"select.displayValue() === null || null\" class=\"et-select-value\">\n        {{ select.displayValue() ?? select.placeholder() }}\n      </span>\n    }\n\n    <ng-content select=\"input[etSelectSearch]\" />\n  </div>\n\n  @if (select.showLoadingIndicator() && !select.open()) {\n    <div class=\"et-select-trigger-busy\" animate.enter=\"et-select-trigger-busy--enter\">\n      <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n    </div>\n  }\n</div>\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing.\n         mousedown is prevented so the trigger keeps focus: `showClear` reads `focused()`, so a\n         blur would unmount this button before the click could land -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n\n  <button\n    [disabled]=\"select.disabled()\"\n    (click)=\"handleArrowClick($event)\"\n    (mousedown)=\"$event.preventDefault()\"\n    class=\"et-input-picker-trigger et-select-arrow\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-chevron\"></i>\n  </button>\n</ng-template>\n\n<ng-template #optionContent>\n  <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n  <!-- keeps the projected options rendered (and their bindings live) while the panel is\n       closed, so the trigger can resolve a preselected value's label and closed typeahead\n       works \u2014 the same template moves into the overlay while it is open -->\n  <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n  </div>\n}\n\n<ng-template etSelectSurface>\n  <et-select-panel #panelThemes=\"etSemanticThemes\" etSemanticThemes>\n    @if (select.showSelectAll()) {\n      <et-select-all-option>{{ resolvedSelectAllLabel() }}</et-select-all-option>\n    }\n\n    @if (select.options()) {\n      <div\n        [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n        [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n        class=\"et-select-virtual-options\"\n        role=\"none\"\n      >\n        @for (item of select.virtualizedItems(); track item.id()) {\n          <et-select-virtual-option [item]=\"item\" />\n        }\n      </div>\n    }\n\n    <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n    @if (select.customValueCandidate(); as candidate) {\n      <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n        <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n        {{ resolvedCreateLabel() }} \u201C{{ candidate }}\u201D\n      </et-select-option>\n    }\n\n    <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n      @if (showBusyBar()) {\n        <div class=\"et-select-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n\n      @if (showLoadingRow()) {\n        @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n          @if (select.showLoadingIndicator()) {\n            <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n          }\n        } @else {\n          <div class=\"et-select-state et-select-state--loading\">\n            <span\n              [class.et-select-state-content--visible]=\"select.showLoadingIndicator()\"\n              [attr.aria-hidden]=\"!select.showLoadingIndicator() || null\"\n              class=\"et-select-state-content\"\n            >\n              <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n              {{ selectLabels().loading }}\n            </span>\n          </div>\n        }\n      } @else if (select.error(); as error) {\n        @if (select.registeredErrorTemplate(); as errorTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: error }\"\n          />\n        } @else {\n          <div\n            [etProvideColor]=\"panelThemes.themes.error()\"\n            class=\"et-select-state et-select-state--error\"\n            role=\"alert\"\n          >\n            {{ error }}\n          </div>\n        }\n      } @else if (!select.visibleItems().length) {\n        @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n          <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n        } @else {\n          <div class=\"et-select-state et-select-state--empty\">{{ selectLabels().empty }}</div>\n        }\n      }\n\n      @if (select.hasMoreItems() && !showLoadingRow()) {\n        @if (showLoadMoreLoading()) {\n          <div class=\"et-select-load-more et-select-load-more--loading\" aria-live=\"polite\">\n            <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n            {{ selectLabels().loading }}\n          </div>\n        } @else {\n          <button\n            [disabled]=\"select.loading()\"\n            (click)=\"select.requestLoadMore()\"\n            class=\"et-select-load-more\"\n            tabindex=\"-1\"\n            type=\"button\"\n          >\n            <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n            {{ resolvedLoadMoreLabel() }}\n          </button>\n        }\n      }\n\n      @if (select.allowAddNew() && !showLoadingRow()) {\n        <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n          <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n          {{ resolvedAddNewLabel() }}\n        </button>\n      }\n    </div>\n  </et-select-panel>\n</ng-template>\n", styles: ["@layer components{et-select{--_et-select-trigger-busy-fade: 24px;--_et-select-trigger-busy-cover: 16px;--_et-select-trigger-busy-mask-direction: to right;display:flex;align-items:center;gap:6px;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;flex:1;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select .et-select-trigger input[etselectsearch]:read-only{cursor:default;caret-color:transparent}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;min-block-size:1lh;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent))}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-busy{position:relative;display:flex;align-items:center;align-self:stretch;flex:none;padding-inline-start:var(--_et-select-trigger-busy-fade);margin-inline-start:calc(-1 * (var(--_et-select-trigger-busy-fade) + var(--_et-select-trigger-busy-cover) + 6px));color:var(--et-surface-color-muted-solid, currentColor)}et-select:dir(rtl){--_et-select-trigger-busy-mask-direction: to left}et-select .et-select-trigger:has(>.et-select-trigger-busy) .et-select-trigger-content{-webkit-mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)));mask-image:linear-gradient(var(--_et-select-trigger-busy-mask-direction),black calc(100% - var(--_et-select-trigger-busy-cover) - var(--_et-select-trigger-busy-fade)),transparent calc(100% - var(--_et-select-trigger-busy-cover)))}et-select .et-select-trigger-busy--enter{animation:et-select-busy-in .12s ease}@media(prefers-reduced-motion:reduce){et-select .et-select-trigger-busy--enter{animation:none}}.et-select-arrow .et-icon{rotate:180deg}@keyframes et-select-busy-in{0%{opacity:0}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], addNewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addNewLabel", required: false }] }], createLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }] } });
 
 const SELECT_IMPORTS = [
@@ -50584,7 +50925,7 @@ class PhoneInputComponent {
         this.phone.focus(options);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PhoneInputComponent, isStandalone: true, selector: "et-phone-input", inputs: { countryLabel: { classPropertyName: "countryLabel", publicName: "countryLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-phone-input" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: PhoneInputDirective, inputs: ["value", "value", "placeholder", "placeholder", "defaultCountry", "defaultCountry", "preferredCountries", "preferredCountries", "touched", "touched", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "warnings", "warnings", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div\n  [aria-labelledby]=\"countryLabelId\"\n  [value]=\"phone.country()\"\n  [readonly]=\"phone.readonly()\"\n  (valueChange)=\"handleCountryChange($event)\"\n  class=\"et-phone-input-country\"\n  mirrorPanelWidth=\"false\"\n  etFormFieldBarrier\n  etSelect\n>\n  <span [id]=\"countryLabelId\" hidden>{{ resolvedCountryLabel() }}</span>\n  <button [disabled]=\"phone.disabled()\" class=\"et-phone-input-country-trigger\" etSelectTrigger type=\"button\">\n    <span class=\"et-phone-input-country-flag\" aria-hidden=\"true\">\n      @if (phone.registeredFlagTemplate(); as flagTemplate) {\n        <ng-template [ngTemplateOutlet]=\"flagTemplate.templateRef\" [ngTemplateOutletContext]=\"activeFlagContext()\" />\n      } @else {\n        {{ activeFlag() }}\n      }\n    </span>\n    <span class=\"et-visually-hidden et-phone-input-country-name\">{{ activeCountryName() }}</span>\n    <span class=\"et-phone-input-dial-code\">+{{ phone.dialCode() }}</span>\n  </button>\n\n  <ng-template etSelectSurface let-select>\n    <et-select-panel class=\"et-phone-input-country-panel\">\n      <div class=\"et-select-panel-search\">\n        <input [placeholder]=\"phoneInputLabels().searchCountries\" etSelectSearch />\n      </div>\n\n      <!-- the label carries the dial code too, so searching by \"+49\" / \"49\" works -->\n      @for (country of countries(); track country.iso2) {\n        <et-select-option [label]=\"country.name + ' +' + country.dialCode\" [value]=\"country.iso2\">\n          <span class=\"et-phone-input-option-flag\" aria-hidden=\"true\">\n            @if (phone.registeredFlagTemplate(); as flagTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"flagTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: country }\"\n              />\n            } @else {\n              {{ country.flag }}\n            }\n          </span>\n          <span class=\"et-phone-input-option-name\">{{ country.name }}</span>\n          <span class=\"et-phone-input-option-dial\">+{{ country.dialCode }}</span>\n        </et-select-option>\n      }\n\n      @if (!select.visibleItems().length) {\n        <div class=\"et-select-state et-select-state--empty\">{{ phoneInputLabels().noCountries }}</div>\n      }\n    </et-select-panel>\n  </ng-template>\n</div>\n\n<input class=\"et-phone-input-field\" etPhoneInputField />\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n         mousedown is prevented so the field keeps focus (its blur would unmount this\n         button before the click could land) -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n</ng-template>\n", styles: ["@layer components{et-phone-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-phone-input .et-phone-input-country-trigger{display:flex;align-items:center;gap:4px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;margin:0;cursor:pointer;appearance:none;white-space:nowrap}et-phone-input .et-phone-input-country-trigger:disabled{cursor:not-allowed}et-phone-input .et-phone-input-country-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px;border-radius:4px}et-phone-input[data-readonly] .et-phone-input-country-trigger{cursor:default}et-phone-input .et-phone-input-country-flag{display:inline-flex;align-items:center}et-phone-input .et-phone-input-dial-code{color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-phone-input .et-phone-input-field:disabled{cursor:not-allowed}et-phone-input[data-mixed] .et-phone-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-phone-input-country-panel{inline-size:min(320px,calc(100vw - 24px))}.et-phone-input-country-panel .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);flex:1;min-inline-size:0}.et-phone-input-option-flag{flex:none;display:inline-flex;align-items:center;justify-content:center}.et-phone-input-option-name{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-phone-input-option-dial{flex:none;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}.et-phone-input-country-flag :is(img,svg),.et-phone-input-option-flag :is(img,svg){display:block;inline-size:20px;block-size:auto}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "directive", type: FormFieldBarrierDirective, selector: "[etFormFieldBarrier]" }, { kind: "directive", type: SelectDirective, selector: "[etSelect]", inputs: ["value", "mixed", "touched", "open", "multiple", "disabled", "readonly", "invalid", "errors", "required", "name", "placeholder", "mixedLabel", "maxLength", "pending", "options", "compareWith", "valueKey", "filterMode", "allowCustomValues", "separators", "normalizeValue", "commitCustomValueOnClose", "maxSelection", "allowAddNew", "loading", "loadError", "hasMoreItems", "mirrorPanelWidth", "pickOnly", "selectAll"], outputs: ["valueChange", "mixedChange", "touchedChange", "openChange", "touch", "queryChange", "loadMore", "addNew", "pickOption", "afterOpen", "afterClose"], exportAs: ["etSelect"] }, { kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "directive", type: SelectSearchDirective, selector: "input[etSelectSearch]", inputs: ["query"], outputs: ["queryChange"], exportAs: ["etSelectSearch"] }, { kind: "directive", type: PhoneInputFieldDirective, selector: "input[etPhoneInputField]", exportAs: ["etPhoneInputField"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PhoneInputComponent, isStandalone: true, selector: "et-phone-input", inputs: { countryLabel: { classPropertyName: "countryLabel", publicName: "countryLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-phone-input" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: PhoneInputDirective, inputs: ["value", "value", "placeholder", "placeholder", "defaultCountry", "defaultCountry", "preferredCountries", "preferredCountries", "touched", "touched", "mixed", "mixed", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "warnings", "warnings", "required", "required", "name", "name", "maxLength", "maxLength", "pending", "pending", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "touch", "touch"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div\n  [aria-labelledby]=\"countryLabelId\"\n  [value]=\"phone.country()\"\n  [readonly]=\"phone.readonly()\"\n  (valueChange)=\"handleCountryChange($event)\"\n  class=\"et-phone-input-country\"\n  mirrorPanelWidth=\"false\"\n  etFormFieldBarrier\n  etSelect\n>\n  <span [id]=\"countryLabelId\" hidden>{{ resolvedCountryLabel() }}</span>\n  <button [disabled]=\"phone.disabled()\" class=\"et-phone-input-country-trigger\" etSelectTrigger type=\"button\">\n    <span class=\"et-phone-input-country-flag\" aria-hidden=\"true\">\n      @if (phone.registeredFlagTemplate(); as flagTemplate) {\n        <ng-template [ngTemplateOutlet]=\"flagTemplate.templateRef\" [ngTemplateOutletContext]=\"activeFlagContext()\" />\n      } @else {\n        {{ activeFlag() }}\n      }\n    </span>\n    <span class=\"et-visually-hidden et-phone-input-country-name\">{{ activeCountryName() }}</span>\n    <span class=\"et-phone-input-dial-code\">+{{ phone.dialCode() }}</span>\n  </button>\n\n  <ng-template etSelectSurface let-select>\n    <et-select-panel class=\"et-phone-input-country-panel\">\n      <div class=\"et-select-panel-search\">\n        <input [placeholder]=\"phoneInputLabels().searchCountries\" etSelectSearch />\n      </div>\n\n      <!-- the label carries the dial code too, so searching by \"+49\" / \"49\" works -->\n      @for (country of countries(); track country.iso2) {\n        <et-select-option [label]=\"country.name + ' +' + country.dialCode\" [value]=\"country.iso2\">\n          <span class=\"et-phone-input-option-flag\" aria-hidden=\"true\">\n            @if (phone.registeredFlagTemplate(); as flagTemplate) {\n              <ng-template\n                [ngTemplateOutlet]=\"flagTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: country }\"\n              />\n            } @else {\n              {{ country.flag }}\n            }\n          </span>\n          <span class=\"et-phone-input-option-name\">{{ country.name }}</span>\n          <span class=\"et-phone-input-option-dial\">+{{ country.dialCode }}</span>\n        </et-select-option>\n      }\n\n      @if (!select.visibleItems().length) {\n        <div class=\"et-select-state et-select-state--empty\">{{ phoneInputLabels().noCountries }}</div>\n      }\n    </et-select-panel>\n  </ng-template>\n</div>\n\n<input class=\"et-phone-input-field\" etPhoneInputField />\n\n<ng-template etControlSuffix>\n  @if (showClear()) {\n    <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n         mousedown is prevented so the field keeps focus (its blur would unmount this\n         button before the click could land) -->\n    <button\n      [attr.aria-label]=\"resolvedClearLabel()\"\n      (click)=\"handleClearClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      class=\"et-input-clear\"\n      animate.enter=\"et-input-clear--enter\"\n      animate.leave=\"et-input-clear--leave\"\n      tabindex=\"-1\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  }\n</ng-template>\n", styles: ["@layer components{et-phone-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-phone-input .et-phone-input-country-trigger{display:flex;align-items:center;gap:4px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;margin:0;cursor:pointer;appearance:none;white-space:nowrap}et-phone-input .et-phone-input-country-trigger:disabled{cursor:not-allowed}et-phone-input .et-phone-input-country-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px;border-radius:4px}et-phone-input[data-readonly] .et-phone-input-country-trigger{cursor:default}et-phone-input .et-phone-input-country-flag{display:inline-flex;align-items:center}et-phone-input .et-phone-input-dial-code{color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-phone-input .et-phone-input-field:disabled{cursor:not-allowed}et-phone-input[data-mixed] .et-phone-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}.et-phone-input-country-panel{inline-size:min(320px,calc(100vw - 24px))}.et-phone-input-country-panel .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);flex:1;min-inline-size:0}.et-phone-input-option-flag{flex:none;display:inline-flex;align-items:center;justify-content:center}.et-phone-input-option-name{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-phone-input-option-dial{flex:none;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}.et-phone-input-country-flag :is(img,svg),.et-phone-input-option-flag :is(img,svg){display:block;inline-size:20px;block-size:auto}}\n"], dependencies: [{ kind: "directive", type: ControlSuffixDirective, selector: "ng-template[etControlSuffix]" }, { kind: "directive", type: FormFieldBarrierDirective, selector: "[etFormFieldBarrier]" }, { kind: "directive", type: SelectDirective, selector: "[etSelect]", inputs: ["value", "mixed", "touched", "open", "multiple", "disabled", "readonly", "invalid", "errors", "required", "name", "placeholder", "mixedLabel", "maxLength", "pending", "options", "compareWith", "valueKey", "displayWith", "filterMode", "allowCustomValues", "separators", "normalizeValue", "commitCustomValueOnClose", "maxSelection", "allowAddNew", "loading", "loadError", "hasMoreItems", "mirrorPanelWidth", "pickOnly", "selectAll"], outputs: ["valueChange", "mixedChange", "touchedChange", "openChange", "touch", "queryChange", "loadMore", "addNew", "pickOption", "afterOpen", "afterClose"], exportAs: ["etSelect"] }, { kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "directive", type: SelectSearchDirective, selector: "input[etSelectSearch]", inputs: ["query"], outputs: ["queryChange"], exportAs: ["etSelectSearch"] }, { kind: "directive", type: PhoneInputFieldDirective, selector: "input[etPhoneInputField]", exportAs: ["etPhoneInputField"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PhoneInputComponent, decorators: [{
             type: Component,
@@ -51604,7 +51945,8 @@ class RangeSliderDirective extends FieldStateControlDirective {
                 const min = this.effectiveMin();
                 return [min, min];
             }
-            const snapped = this.value().map((end) => this.snapValue(end));
+            const range = this.value() ?? [this.effectiveMin(), this.effectiveMax()];
+            const snapped = range.map((end) => this.snapValue(end));
             return [Math.min(...snapped), Math.max(...snapped)];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "thumbValues" }] : /* istanbul ignore next */ []));
@@ -52489,6 +52831,8 @@ const defaultNormalizeValue = (raw) => {
     const trimmed = raw.trim();
     return trimmed.length ? trimmed : null;
 };
+// a form model can hold `null` for a `string[]` field (a JSON `null` from an API)
+const tagsOf = (value) => value ?? [];
 class TagInputDirective extends TextShellControlDirective {
     constructor() {
         super(...arguments);
@@ -52523,7 +52867,7 @@ class TagInputDirective extends TextShellControlDirective {
         this.maxSelection = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maxSelection" }] : /* istanbul ignore next */ []));
         /** The raw value normalized to the tags the control currently shows. Mixed has no effective tags. */
-        this.effectiveValues = computed(() => (this.mixed() ? [] : this.value()), /* @ts-ignore */
+        this.effectiveValues = computed(() => (this.mixed() ? [] : tagsOf(this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveValues" }] : /* istanbul ignore next */ []));
         this.hasValue = computed(() => this.mixed() || this.effectiveValues().length > 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
@@ -52596,7 +52940,7 @@ class TagInputDirective extends TextShellControlDirective {
         if (!this.interactive() || this.mixed()) {
             return;
         }
-        const current = this.value();
+        const current = tagsOf(this.value());
         // a no-op removal must not write: `filter` always allocates, so the model would notify with
         // an equal-but-new array and dirty the bound form field on a keystroke that changed nothing
         if (index < 0 || index >= current.length) {
@@ -54129,6 +54473,8 @@ class GridDirective {
                     .join(', ')}. Configured breakpoints are ${known.map((name) => `"${name}"`).join(', ')}.`, state);
             }
         }
+        for (const id of this.leavingIds())
+            this.cancelLeave(id);
         const items = state.items.map((item) => ({
             id: item.id,
             type: item.type,
@@ -56774,8 +57120,21 @@ const runNotificationPromise = ({ content, open, injector, ...options }) => {
         const resolved = typeof source === 'function' ? source(result) : source;
         ref.replaceConfig({ ...toNotificationContent(resolved), status });
     };
+    const cancel = () => {
+        if (isReplacedByLaterOpen())
+            return;
+        ref.dismiss();
+    };
     if (isQuery$1(work)) {
-        followQuery({ query: work, ref, settle, updateProgress, followProgress: loading.progress !== undefined, injector });
+        followQuery({
+            query: work,
+            ref,
+            settle,
+            cancel,
+            updateProgress,
+            followProgress: loading.progress !== undefined,
+            injector,
+        });
     }
     else if (isObservable(work)) {
         let lastValue;
@@ -56807,18 +57166,39 @@ const runNotificationPromise = ({ content, open, injector, ...options }) => {
  * `QueryErrorResponse`, everything else an `unknown`), not to pick different code paths.
  */
 const createNotificationPromiseFn = (deps) => ((work, content) => runNotificationPromise({ ...deps, work, content }));
-const followQuery = ({ query, ref, settle, updateProgress, followProgress, injector, }) => {
+const followQuery = ({ query, ref, settle, cancel, updateProgress, followProgress, injector, }) => {
     let effectRef = null;
     let hasSettled = false;
     const stopFollowing = () => {
         effectRef?.destroy();
         effectRef = null;
     };
+    let hasSeenLoading = false;
+    let eventBeforeLoading = null;
+    const markLoading = () => {
+        hasSeenLoading = true;
+        eventBeforeLoading = untracked(() => query.latestHttpEvent());
+    };
+    // Read before the effect's first run, which an abort can beat.
+    if (untracked(() => query.executionState())?.type === 'loading')
+        markLoading();
     effectRef = effect(() => {
         const state = query.executionState();
-        if (!state || hasSettled)
+        if (hasSettled)
             return;
+        if (!state) {
+            if (!hasSeenLoading)
+                return;
+            hasSettled = true;
+            untracked(() => {
+                cancel();
+                stopFollowing();
+            });
+            return;
+        }
         if (state.type === 'loading') {
+            if (!hasSeenLoading)
+                markLoading();
             const percentage = state.loading.progress?.percentage;
             if (followProgress && percentage !== undefined) {
                 untracked(() => updateProgress(percentage));
@@ -56827,7 +57207,14 @@ const followQuery = ({ query, ref, settle, updateProgress, followProgress, injec
         }
         hasSettled = true;
         untracked(() => {
-            if (state.type === 'success') {
+            const latestEvent = query.latestHttpEvent();
+            // An aborted re-execution falls back to the previous round's response, which reads as a success.
+            if (state.type === 'success' &&
+                hasSeenLoading &&
+                (latestEvent === eventBeforeLoading || latestEvent?.type !== HttpEventType.Response)) {
+                cancel();
+            }
+            else if (state.type === 'success') {
                 settle('success', state.response);
             }
             else {
@@ -59410,6 +59797,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{ selector: 'et-scheduler-appointment-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-scheduler-appointment{display:flex;align-items:center;gap:6px;padding:2px 6px;border:none;border-radius:4px;background:color-mix(in srgb,var(--et-theme-color-primary-solid) 14%,transparent);color:var(--et-theme-color-ink-solid);font:inherit;font-size:12px;text-align:start;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media(hover:hover){.et-scheduler-appointment:hover{background:color-mix(in srgb,var(--et-theme-color-primary-solid) 22%,transparent)}}.et-scheduler-appointment:focus-visible{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:1px}.et-scheduler-appointment:where([data-selected]){background:var(--et-theme-color-primary-solid);color:var(--et-theme-color-on-primary)}.et-scheduler-appointment:where([data-draggable]){cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.et-scheduler-appointment:where([data-dragging]){box-shadow:var(--et-scheduler-appointment-drag-shadow, 0 2px 8px rgb(var(--et-shadow-color-rgb, 0 0 0) / .25));cursor:grabbing}.et-scheduler-appointment-title{overflow:hidden;font-weight:600;min-inline-size:0;flex:1;text-overflow:ellipsis;white-space:nowrap}.et-scheduler-appointment-dot{flex-shrink:0;inline-size:6px;block-size:6px;border-radius:999px;background:var(--et-theme-color-primary-solid)}:where(.et-scheduler-appointment,.et-scheduler-time-grid-block):where([data-selected]) .et-scheduler-appointment-dot{background:var(--et-theme-color-on-primary)}.et-scheduler-appointment-time-range{flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap}.et-scheduler-appointment-location{display:flex;flex-shrink:0;align-items:center;gap:3px;max-inline-size:40%}.et-scheduler-appointment-location-icon{flex-shrink:0;inline-size:10px;block-size:10px}.et-scheduler-appointment-location-text{overflow:hidden;min-inline-size:0;text-overflow:ellipsis;white-space:nowrap}.et-scheduler-appointment-chain-count{display:flex;flex-shrink:0;align-items:center;gap:2px;font-variant-numeric:tabular-nums}.et-scheduler-appointment-chain-count-icon{inline-size:8px;block-size:8px;transform:rotate(90deg)}}\n"] }]
         }] });
 
+/**
+ * The time-range piece of an appointment badge, stamped by `etSchedulerBadgeTimeRange`. Renders
+ * nothing for an all-day appointment, which has no meaningful start/end time to show.
+ *
+ * @internal
+ */
+class SchedulerBadgeTimeRangeComponent {
+    constructor() {
+        this.scheduler = inject(SchedulerDirective, { optional: true });
+        this.node = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+        this.range = computed(() => {
+            const appointment = this.node().appointment;
+            if (appointment.allDay) {
+                return null;
+            }
+            const locale = this.scheduler?.effectiveLocale();
+            const options = locale ? { locale } : undefined;
+            return `${format(appointment.start, 'p', options)}–${format(appointment.end, 'p', options)}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SchedulerBadgeTimeRangeComponent, isStandalone: true, selector: "et-scheduler-badge-time-range", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (range(); as range) {
+      <span class="et-scheduler-appointment-time-range">{{ range }}</span>
+    }
+  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTimeRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-scheduler-badge-time-range',
+                    template: `
+    @if (range(); as range) {
+      <span class="et-scheduler-appointment-time-range">{{ range }}</span>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
+
+/**
+ * The title piece of an appointment badge, stamped by `etSchedulerBadgeTitle`.
+ *
+ * @internal
+ */
+class SchedulerBadgeTitleComponent {
+    constructor() {
+        this.node = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: SchedulerBadgeTitleComponent, isStandalone: true, selector: "et-scheduler-badge-title", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<span class="et-scheduler-appointment-title">{{ node().appointment.title }}</span>`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'et-scheduler-badge-title',
+                    template: `<span class="et-scheduler-appointment-title">{{ node().appointment.title }}</span>`,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
+
+const SCHEDULER_FALLBACK_BADGE_ADORNMENTS = [
+    { component: SchedulerBadgeTitleComponent, order: 0 },
+    { component: SchedulerBadgeTimeRangeComponent, order: 10 },
+];
+
 /** The default agenda list: one section per visible day, appointments as full-width badges indented by chain depth. */
 class SchedulerAgendaViewComponent {
     constructor() {
@@ -59432,7 +59888,7 @@ class SchedulerAgendaViewComponent {
         injectStyleManager().mount(SchedulerAppointmentStylesComponent);
     }
     badgeAdornments() {
-        return this.featureHost?.badgeAdornments() ?? [];
+        return this.featureHost?.badgeAdornments() ?? SCHEDULER_FALLBACK_BADGE_ADORNMENTS;
     }
     weekdayLabel(date) {
         const locale = this.scheduler?.effectiveLocale();
@@ -59713,48 +60169,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "etSchedulerBadgeLocation", required: false }] }] } });
 
-/**
- * The time-range piece of an appointment badge, stamped by `etSchedulerBadgeTimeRange`. Renders
- * nothing for an all-day appointment, which has no meaningful start/end time to show.
- *
- * @internal
- */
-class SchedulerBadgeTimeRangeComponent {
-    constructor() {
-        this.scheduler = inject(SchedulerDirective, { optional: true });
-        this.node = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
-        this.range = computed(() => {
-            const appointment = this.node().appointment;
-            if (appointment.allDay) {
-                return null;
-            }
-            const locale = this.scheduler?.effectiveLocale();
-            const options = locale ? { locale } : undefined;
-            return `${format(appointment.start, 'p', options)}–${format(appointment.end, 'p', options)}`;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTimeRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SchedulerBadgeTimeRangeComponent, isStandalone: true, selector: "et-scheduler-badge-time-range", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (range(); as range) {
-      <span class="et-scheduler-appointment-time-range">{{ range }}</span>
-    }
-  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTimeRangeComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-scheduler-badge-time-range',
-                    template: `
-    @if (range(); as range) {
-      <span class="et-scheduler-appointment-time-range">{{ range }}</span>
-    }
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
-
 /**
  * Built-in badge adornment: the appointment's `start`–`end` time, hidden for an all-day
  * appointment. One of the default pieces `<et-scheduler>` bundles - see `registerBadgeAdornment`.
@@ -59785,28 +60199,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "etSchedulerBadgeTimeRange", required: false }] }] } });
 
-/**
- * The title piece of an appointment badge, stamped by `etSchedulerBadgeTitle`.
- *
- * @internal
- */
-class SchedulerBadgeTitleComponent {
-    constructor() {
-        this.node = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: SchedulerBadgeTitleComponent, isStandalone: true, selector: "et-scheduler-badge-title", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<span class="et-scheduler-appointment-title">{{ node().appointment.title }}</span>`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerBadgeTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'et-scheduler-badge-title',
-                    template: `<span class="et-scheduler-appointment-title">{{ node().appointment.title }}</span>`,
-                    encapsulation: ViewEncapsulation.None,
-                }]
-        }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }] } });
-
 /**
  * Built-in badge adornment: the appointment's title. One of the default pieces `<et-scheduler>`
  * bundles - see `registerBadgeAdornment`.
@@ -60802,7 +61194,7 @@ class SchedulerMonthViewComponent {
         injectStyleManager().mount(SchedulerAppointmentStylesComponent);
     }
     badgeAdornments() {
-        return this.featureHost?.badgeAdornments() ?? [];
+        return this.featureHost?.badgeAdornments() ?? SCHEDULER_FALLBACK_BADGE_ADORNMENTS;
     }
     weekdays() {
         return this.scheduler?.weekdays() ?? [];
@@ -61154,7 +61546,7 @@ class SchedulerTimeGridViewComponent {
         });
     }
     badgeAdornments() {
-        return this.featureHost?.badgeAdornments() ?? [];
+        return this.featureHost?.badgeAdornments() ?? SCHEDULER_FALLBACK_BADGE_ADORNMENTS;
     }
     weekdayLabel(date) {
         const locale = this.scheduler?.effectiveLocale();
@@ -61483,10 +61875,15 @@ class SchedulerComponent {
          */
         this.headless = inject(SchedulerDirective);
         this.elementRef = inject(ElementRef);
+        /** Every appointment the scheduler knows about - not pre-filtered to the visible range. */
+        this.appointments = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appointments" }] : /* istanbul ignore next */ []));
         /** Emits the edited or newly-added appointment once the edit surface saves. */
         this.appointmentSave = output();
         /** Emits every id to remove once the edit surface deletes a chain. */
         this.appointmentsDelete = output();
+        /** Emits when a move or resize lands an appointment somewhere else - see `SchedulerDirective.appointmentReschedule`. */
+        this.appointmentReschedule = outputFromObservable(outputToObservable(this.headless.appointmentReschedule));
         this.dimensions = signalHostElementDimensions();
         this.isNarrow = computed(() => (this.dimensions().client?.width ?? Infinity) < NARROW_CONTAINER_WIDTH, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isNarrow" }] : /* istanbul ignore next */ []));
@@ -61579,7 +61976,7 @@ class SchedulerComponent {
     get selectedAppointment() {
         return this.headless.selectedAppointment;
     }
-    appointments() {
+    visibleAppointments() {
         return this.headless.visibleAppointments();
     }
     registerBadgeAdornment(adornment) {
@@ -61684,10 +62081,10 @@ class SchedulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SchedulerComponent, isStandalone: true, selector: "et-scheduler", outputs: { appointmentSave: "appointmentSave", appointmentsDelete: "appointmentsDelete" }, host: { classAttribute: "et-scheduler" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SchedulerComponent, isStandalone: true, selector: "et-scheduler", inputs: { appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { appointmentSave: "appointmentSave", appointmentsDelete: "appointmentsDelete", appointmentReschedule: "appointmentReschedule" }, host: { classAttribute: "et-scheduler" }, providers: [
             provideIcons(CALENDAR_ICON, CHEVRON_ICON, PLUS_ICON),
             { provide: SCHEDULER_FEATURE_HOST, useExisting: SchedulerComponent },
-        ], hostDirectives: [{ directive: SchedulerDirective, inputs: ["appointments", "appointments", "view", "view", "focusedDate", "focusedDate", "selectedAppointmentId", "selectedAppointmentId", "locale", "locale", "firstDayOfWeek", "firstDayOfWeek", "agendaDays", "agendaDays", "businessHours", "businessHours", "nowIndicator", "nowIndicator"], outputs: ["viewChange", "viewChange", "focusedDateChange", "focusedDateChange", "selectedAppointmentIdChange", "selectedAppointmentIdChange", "appointmentReschedule", "appointmentReschedule"] }, { directive: SchedulerBadgeColorDotDirective, inputs: ["etSchedulerBadgeColorDot", "etSchedulerBadgeColorDot"] }, { directive: SchedulerBadgeTitleDirective, inputs: ["etSchedulerBadgeTitle", "etSchedulerBadgeTitle"] }, { directive: SchedulerBadgeTimeRangeDirective, inputs: ["etSchedulerBadgeTimeRange", "etSchedulerBadgeTimeRange"] }, { directive: SchedulerBadgeLocationDirective, inputs: ["etSchedulerBadgeLocation", "etSchedulerBadgeLocation"] }, { directive: SchedulerBadgeChainCountDirective, inputs: ["etSchedulerBadgeChainCount", "etSchedulerBadgeChainCount"] }, { directive: SchedulerActionAddAppointmentDirective, inputs: ["etSchedulerActionAddAppointment", "etSchedulerActionAddAppointment"] }, { directive: SchedulerSwipeNavigationDirective, inputs: ["etSchedulerSwipeNavigation", "etSchedulerSwipeNavigation"] }, { directive: SchedulerAppointmentDragDirective, inputs: ["etSchedulerAppointmentDrag", "etSchedulerAppointmentDrag"] }], ngImport: i0, template: "<div class=\"et-scheduler-header\">\n  <button\n    [attr.aria-label]=\"todayLabel()\"\n    (click)=\"headless.goToToday()\"\n    class=\"et-scheduler-today-button\"\n    et-button\n    size=\"sm\"\n    variant=\"outline\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-calendar\" aria-hidden=\"true\"></i>\n    <span class=\"et-scheduler-today-button-label\">{{ todayLabel() }}</span>\n  </button>\n\n  @if (isNarrow()) {\n    <div class=\"et-scheduler-toolbar-fabs\" etFloatingAction>\n      <div etFloatingActionAnchor>\n        <div class=\"et-scheduler-toolbar-fab-stack\" etFloatingActionTrigger>\n          @for (action of toolbarActions(); track $index) {\n            @if (action.icon; as icon) {\n              <button\n                [attr.aria-label]=\"action.label()\"\n                (click)=\"action.run()\"\n                class=\"et-scheduler-toolbar-action\"\n                et-fab\n                type=\"button\"\n              >\n                <i [etIcon]=\"icon\" aria-hidden=\"true\"></i>\n              </button>\n            } @else {\n              <button (click)=\"action.run()\" class=\"et-scheduler-toolbar-action\" et-fab expanded type=\"button\">\n                {{ action.label() }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    @for (action of toolbarActions(); track $index) {\n      <button (click)=\"action.run()\" class=\"et-scheduler-toolbar-action\" et-button size=\"sm\" type=\"button\">\n        @if (action.icon) {\n          <i [etIcon]=\"action.icon\" aria-hidden=\"true\"></i>\n        }\n        {{ action.label() }}\n      </button>\n    }\n  }\n\n  <div class=\"et-scheduler-nav-buttons\">\n    <button\n      [attr.aria-label]=\"previousLabel()\"\n      (click)=\"headless.previous()\"\n      class=\"et-scheduler-nav-button et-scheduler-nav-button--previous\"\n      et-icon-button\n      size=\"sm\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-chevron\"></i>\n    </button>\n\n    <button\n      [attr.aria-label]=\"nextLabel()\"\n      (click)=\"headless.next()\"\n      class=\"et-scheduler-nav-button et-scheduler-nav-button--next\"\n      et-icon-button\n      size=\"sm\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-chevron\"></i>\n    </button>\n  </div>\n\n  <span class=\"et-scheduler-header-label\">{{ headerLabel() }}</span>\n\n  <div class=\"et-scheduler-header-spacer\"></div>\n\n  <et-segmented-button-group\n    [value]=\"headless.view()\"\n    (valueChange)=\"setView($event)\"\n    class=\"et-scheduler-view-switch\"\n    size=\"sm\"\n    variant=\"tabs\"\n  >\n    <et-label class=\"et-visually-hidden et-scheduler-view-switch-label\">{{ switchViewLabel() }}</et-label>\n\n    <et-segmented-button value=\"month\">{{ monthViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"week\">{{ weekViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"day\">{{ dayViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"agenda\">{{ agendaViewLabel() }}</et-segmented-button>\n  </et-segmented-button-group>\n</div>\n\n<div class=\"et-scheduler-body\">\n  @switch (headless.view()) {\n    @case ('agenda') {\n      <et-scheduler-agenda-view />\n    }\n    @case ('month') {\n      <et-scheduler-month-view [attr.aria-label]=\"headerLabel()\" />\n    }\n    @default {\n      <et-scheduler-time-grid-view [attr.aria-label]=\"headerLabel()\" />\n    }\n  }\n</div>\n", styles: ["@layer components{.et-scheduler{container-type:inline-size;container-name:et-scheduler;display:flex;flex-direction:column;gap:12px}.et-scheduler-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.et-scheduler-view-switch{flex-basis:100%}.et-scheduler-toolbar-fab-stack{display:flex;gap:8px}@container et-scheduler not (min-inline-size: 480px){.et-scheduler .et-scheduler-today-button{--et-button-padding: 0;inline-size:3.1rem;block-size:3.1rem;border-radius:9999px}.et-scheduler .et-scheduler-today-button-label{display:none}}@container et-scheduler (min-inline-size: 480px){.et-scheduler-header-spacer{display:block}.et-scheduler-view-switch{flex-basis:auto}.et-scheduler .et-scheduler-today-button .et-button-icon{display:none}}.et-scheduler-nav-buttons{display:flex;gap:2px}.et-scheduler-nav-button--previous .et-icon{rotate:-90deg}.et-scheduler-nav-button--next .et-icon{rotate:90deg}.et-scheduler-header-label{flex:1 1 auto;min-inline-size:0;overflow:hidden;font-size:15px;font-weight:600;color:var(--et-surface-color-solid);white-space:nowrap;text-overflow:ellipsis}.et-scheduler-header-spacer{display:none;flex:1}.et-scheduler-body{display:flex;flex:1;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "component", type: FabComponent, selector: "[et-fab]", inputs: ["variant", "size", "expanded", "iconAlignment"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: FloatingActionDirective, selector: "[etFloatingAction]", inputs: ["disabled"], exportAs: ["etFloatingAction"] }, { kind: "directive", type: FloatingActionAnchorDirective, selector: "[etFloatingActionAnchor]", exportAs: ["etFloatingActionAnchor"] }, { kind: "directive", type: FloatingActionTriggerDirective, selector: "[etFloatingActionTrigger]", exportAs: ["etFloatingActionTrigger"] }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "component", type: SchedulerAgendaViewComponent, selector: "et-scheduler-agenda-view" }, { kind: "component", type: SchedulerMonthViewComponent, selector: "et-scheduler-month-view" }, { kind: "component", type: SchedulerTimeGridViewComponent, selector: "et-scheduler-time-grid-view" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], hostDirectives: [{ directive: SchedulerDirective, inputs: ["appointments", "appointments", "view", "view", "focusedDate", "focusedDate", "selectedAppointmentId", "selectedAppointmentId", "locale", "locale", "firstDayOfWeek", "firstDayOfWeek", "agendaDays", "agendaDays", "businessHours", "businessHours", "nowIndicator", "nowIndicator"], outputs: ["viewChange", "viewChange", "focusedDateChange", "focusedDateChange", "selectedAppointmentIdChange", "selectedAppointmentIdChange"] }, { directive: SchedulerBadgeColorDotDirective, inputs: ["etSchedulerBadgeColorDot", "etSchedulerBadgeColorDot"] }, { directive: SchedulerBadgeTitleDirective, inputs: ["etSchedulerBadgeTitle", "etSchedulerBadgeTitle"] }, { directive: SchedulerBadgeTimeRangeDirective, inputs: ["etSchedulerBadgeTimeRange", "etSchedulerBadgeTimeRange"] }, { directive: SchedulerBadgeLocationDirective, inputs: ["etSchedulerBadgeLocation", "etSchedulerBadgeLocation"] }, { directive: SchedulerBadgeChainCountDirective, inputs: ["etSchedulerBadgeChainCount", "etSchedulerBadgeChainCount"] }, { directive: SchedulerActionAddAppointmentDirective, inputs: ["etSchedulerActionAddAppointment", "etSchedulerActionAddAppointment"] }, { directive: SchedulerSwipeNavigationDirective, inputs: ["etSchedulerSwipeNavigation", "etSchedulerSwipeNavigation"] }, { directive: SchedulerAppointmentDragDirective, inputs: ["etSchedulerAppointmentDrag", "etSchedulerAppointmentDrag"] }], ngImport: i0, template: "<div class=\"et-scheduler-header\">\n  <button\n    [attr.aria-label]=\"todayLabel()\"\n    (click)=\"headless.goToToday()\"\n    class=\"et-scheduler-today-button\"\n    et-button\n    size=\"sm\"\n    variant=\"outline\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-calendar\" aria-hidden=\"true\"></i>\n    <span class=\"et-scheduler-today-button-label\">{{ todayLabel() }}</span>\n  </button>\n\n  @if (isNarrow()) {\n    <div class=\"et-scheduler-toolbar-fabs\" etFloatingAction>\n      <div etFloatingActionAnchor>\n        <div class=\"et-scheduler-toolbar-fab-stack\" etFloatingActionTrigger>\n          @for (action of toolbarActions(); track $index) {\n            @if (action.icon; as icon) {\n              <button\n                [attr.aria-label]=\"action.label()\"\n                (click)=\"action.run()\"\n                class=\"et-scheduler-toolbar-action\"\n                et-fab\n                type=\"button\"\n              >\n                <i [etIcon]=\"icon\" aria-hidden=\"true\"></i>\n              </button>\n            } @else {\n              <button (click)=\"action.run()\" class=\"et-scheduler-toolbar-action\" et-fab expanded type=\"button\">\n                {{ action.label() }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    @for (action of toolbarActions(); track $index) {\n      <button (click)=\"action.run()\" class=\"et-scheduler-toolbar-action\" et-button size=\"sm\" type=\"button\">\n        @if (action.icon) {\n          <i [etIcon]=\"action.icon\" aria-hidden=\"true\"></i>\n        }\n        {{ action.label() }}\n      </button>\n    }\n  }\n\n  <div class=\"et-scheduler-nav-buttons\">\n    <button\n      [attr.aria-label]=\"previousLabel()\"\n      (click)=\"headless.previous()\"\n      class=\"et-scheduler-nav-button et-scheduler-nav-button--previous\"\n      et-icon-button\n      size=\"sm\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-chevron\"></i>\n    </button>\n\n    <button\n      [attr.aria-label]=\"nextLabel()\"\n      (click)=\"headless.next()\"\n      class=\"et-scheduler-nav-button et-scheduler-nav-button--next\"\n      et-icon-button\n      size=\"sm\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-chevron\"></i>\n    </button>\n  </div>\n\n  <span class=\"et-scheduler-header-label\">{{ headerLabel() }}</span>\n\n  <div class=\"et-scheduler-header-spacer\"></div>\n\n  <et-segmented-button-group\n    [value]=\"headless.view()\"\n    (valueChange)=\"setView($event)\"\n    class=\"et-scheduler-view-switch\"\n    size=\"sm\"\n    variant=\"tabs\"\n  >\n    <et-label class=\"et-visually-hidden et-scheduler-view-switch-label\">{{ switchViewLabel() }}</et-label>\n\n    <et-segmented-button value=\"month\">{{ monthViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"week\">{{ weekViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"day\">{{ dayViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"agenda\">{{ agendaViewLabel() }}</et-segmented-button>\n  </et-segmented-button-group>\n</div>\n\n<div class=\"et-scheduler-body\">\n  @switch (headless.view()) {\n    @case ('agenda') {\n      <et-scheduler-agenda-view />\n    }\n    @case ('month') {\n      <et-scheduler-month-view [attr.aria-label]=\"headerLabel()\" />\n    }\n    @default {\n      <et-scheduler-time-grid-view [attr.aria-label]=\"headerLabel()\" />\n    }\n  }\n</div>\n", styles: ["@layer components{.et-scheduler{container-type:inline-size;container-name:et-scheduler;display:flex;flex-direction:column;gap:12px}.et-scheduler-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.et-scheduler-view-switch{flex-basis:100%}.et-scheduler-toolbar-fab-stack{display:flex;gap:8px}@container et-scheduler not (min-inline-size: 480px){.et-scheduler .et-scheduler-today-button{--et-button-padding: 0;inline-size:3.1rem;block-size:3.1rem;border-radius:9999px}.et-scheduler .et-scheduler-today-button-label{display:none}}@container et-scheduler (min-inline-size: 480px){.et-scheduler-header-spacer{display:block}.et-scheduler-view-switch{flex-basis:auto}.et-scheduler .et-scheduler-today-button .et-button-icon{display:none}}.et-scheduler-nav-buttons{display:flex;gap:2px}.et-scheduler-nav-button--previous .et-icon{rotate:-90deg}.et-scheduler-nav-button--next .et-icon{rotate:90deg}.et-scheduler-header-label{flex:1 1 auto;min-inline-size:0;overflow:hidden;font-size:15px;font-weight:600;color:var(--et-surface-color-solid);white-space:nowrap;text-overflow:ellipsis}.et-scheduler-header-spacer{display:none;flex:1}.et-scheduler-body{display:flex;flex:1;flex-direction:column}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "component", type: FabComponent, selector: "[et-fab]", inputs: ["variant", "size", "expanded", "iconAlignment"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: FloatingActionDirective, selector: "[etFloatingAction]", inputs: ["disabled"], exportAs: ["etFloatingAction"] }, { kind: "directive", type: FloatingActionAnchorDirective, selector: "[etFloatingActionAnchor]", exportAs: ["etFloatingActionAnchor"] }, { kind: "directive", type: FloatingActionTriggerDirective, selector: "[etFloatingActionTrigger]", exportAs: ["etFloatingActionTrigger"] }, { kind: "component", type: SegmentedButtonGroupComponent, selector: "et-segmented-button-group", inputs: ["size", "variant"] }, { kind: "component", type: SegmentedButtonComponent, selector: "et-segmented-button" }, { kind: "component", type: LabelDirective, selector: "et-label" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "component", type: SchedulerAgendaViewComponent, selector: "et-scheduler-agenda-view" }, { kind: "component", type: SchedulerMonthViewComponent, selector: "et-scheduler-month-view" }, { kind: "component", type: SchedulerTimeGridViewComponent, selector: "et-scheduler-time-grid-view" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SchedulerComponent, decorators: [{
             type: Component,
@@ -61717,7 +62114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                                 'businessHours',
                                 'nowIndicator',
                             ],
-                            outputs: ['viewChange', 'focusedDateChange', 'selectedAppointmentIdChange', 'appointmentReschedule'],
+                            outputs: ['viewChange', 'focusedDateChange', 'selectedAppointmentIdChange'],
                         },
                         { directive: SchedulerBadgeColorDotDirective, inputs: ['etSchedulerBadgeColorDot'] },
                         { directive: SchedulerBadgeTitleDirective, inputs: ['etSchedulerBadgeTitle'] },
@@ -61730,7 +62127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], host: {
                         class: 'et-scheduler',
                     }, template: "<div class=\"et-scheduler-header\">\n  <button\n    [attr.aria-label]=\"todayLabel()\"\n    (click)=\"headless.goToToday()\"\n    class=\"et-scheduler-today-button\"\n    et-button\n    size=\"sm\"\n    variant=\"outline\"\n    type=\"button\"\n  >\n    <i etIcon=\"et-calendar\" aria-hidden=\"true\"></i>\n    <span class=\"et-scheduler-today-button-label\">{{ todayLabel() }}</span>\n  </button>\n\n  @if (isNarrow()) {\n    <div class=\"et-scheduler-toolbar-fabs\" etFloatingAction>\n      <div etFloatingActionAnchor>\n        <div class=\"et-scheduler-toolbar-fab-stack\" etFloatingActionTrigger>\n          @for (action of toolbarActions(); track $index) {\n            @if (action.icon; as icon) {\n              <button\n                [attr.aria-label]=\"action.label()\"\n                (click)=\"action.run()\"\n                class=\"et-scheduler-toolbar-action\"\n                et-fab\n                type=\"button\"\n              >\n                <i [etIcon]=\"icon\" aria-hidden=\"true\"></i>\n              </button>\n            } @else {\n              <button (click)=\"action.run()\" class=\"et-scheduler-toolbar-action\" et-fab expanded type=\"button\">\n                {{ action.label() }}\n              </button>\n            }\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    @for (action of toolbarActions(); track $index) {\n      <button (click)=\"action.run()\" class=\"et-scheduler-toolbar-action\" et-button size=\"sm\" type=\"button\">\n        @if (action.icon) {\n          <i [etIcon]=\"action.icon\" aria-hidden=\"true\"></i>\n        }\n        {{ action.label() }}\n      </button>\n    }\n  }\n\n  <div class=\"et-scheduler-nav-buttons\">\n    <button\n      [attr.aria-label]=\"previousLabel()\"\n      (click)=\"headless.previous()\"\n      class=\"et-scheduler-nav-button et-scheduler-nav-button--previous\"\n      et-icon-button\n      size=\"sm\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-chevron\"></i>\n    </button>\n\n    <button\n      [attr.aria-label]=\"nextLabel()\"\n      (click)=\"headless.next()\"\n      class=\"et-scheduler-nav-button et-scheduler-nav-button--next\"\n      et-icon-button\n      size=\"sm\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-chevron\"></i>\n    </button>\n  </div>\n\n  <span class=\"et-scheduler-header-label\">{{ headerLabel() }}</span>\n\n  <div class=\"et-scheduler-header-spacer\"></div>\n\n  <et-segmented-button-group\n    [value]=\"headless.view()\"\n    (valueChange)=\"setView($event)\"\n    class=\"et-scheduler-view-switch\"\n    size=\"sm\"\n    variant=\"tabs\"\n  >\n    <et-label class=\"et-visually-hidden et-scheduler-view-switch-label\">{{ switchViewLabel() }}</et-label>\n\n    <et-segmented-button value=\"month\">{{ monthViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"week\">{{ weekViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"day\">{{ dayViewLabel() }}</et-segmented-button>\n    <et-segmented-button value=\"agenda\">{{ agendaViewLabel() }}</et-segmented-button>\n  </et-segmented-button-group>\n</div>\n\n<div class=\"et-scheduler-body\">\n  @switch (headless.view()) {\n    @case ('agenda') {\n      <et-scheduler-agenda-view />\n    }\n    @case ('month') {\n      <et-scheduler-month-view [attr.aria-label]=\"headerLabel()\" />\n    }\n    @default {\n      <et-scheduler-time-grid-view [attr.aria-label]=\"headerLabel()\" />\n    }\n  }\n</div>\n", styles: ["@layer components{.et-scheduler{container-type:inline-size;container-name:et-scheduler;display:flex;flex-direction:column;gap:12px}.et-scheduler-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.et-scheduler-view-switch{flex-basis:100%}.et-scheduler-toolbar-fab-stack{display:flex;gap:8px}@container et-scheduler not (min-inline-size: 480px){.et-scheduler .et-scheduler-today-button{--et-button-padding: 0;inline-size:3.1rem;block-size:3.1rem;border-radius:9999px}.et-scheduler .et-scheduler-today-button-label{display:none}}@container et-scheduler (min-inline-size: 480px){.et-scheduler-header-spacer{display:block}.et-scheduler-view-switch{flex-basis:auto}.et-scheduler .et-scheduler-today-button .et-button-icon{display:none}}.et-scheduler-nav-buttons{display:flex;gap:2px}.et-scheduler-nav-button--previous .et-icon{rotate:-90deg}.et-scheduler-nav-button--next .et-icon{rotate:90deg}.et-scheduler-header-label{flex:1 1 auto;min-inline-size:0;overflow:hidden;font-size:15px;font-weight:600;color:var(--et-surface-color-solid);white-space:nowrap;text-overflow:ellipsis}.et-scheduler-header-spacer{display:none;flex:1}.et-scheduler-body{display:flex;flex:1;flex-direction:column}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { appointmentSave: [{ type: i0.Output, args: ["appointmentSave"] }], appointmentsDelete: [{ type: i0.Output, args: ["appointmentsDelete"] }] } });
+        }], ctorParameters: () => [], propDecorators: { appointments: [{ type: i0.Input, args: [{ isSignal: true, alias: "appointments", required: false }] }], appointmentSave: [{ type: i0.Output, args: ["appointmentSave"] }], appointmentsDelete: [{ type: i0.Output, args: ["appointmentsDelete"] }], appointmentReschedule: [{ type: i0.Output, args: ["appointmentReschedule"] }] } });
 
 const SCHEDULER_IMPORTS = [
     SchedulerDirective,
@@ -67396,6 +67793,8 @@ const TABLE_ERROR_CODES = {
     MISSING_COLUMN_FEATURE: 3512,
     /** A CSV export read an object, list or function from a column that has no `exportValue`. */
     UNSERIALIZABLE_EXPORT_VALUE: 3513,
+    /** Client sorting read an object, list or function from a sortable column that has no `sortValue`. */
+    UNSORTABLE_COLUMN_VALUE: 3514,
 };
 
 // What tells Excel the file is UTF-8; see `bom`.
@@ -67995,6 +68394,17 @@ const isMissing = (value) => value === null ||
     value === undefined ||
     (typeof value === 'number' && Number.isNaN(value)) ||
     (value instanceof Date && Number.isNaN(value.getTime()));
+const isSortValue = (value) => value === null ||
+    value === undefined ||
+    value instanceof Date ||
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean';
+const assertSortValue = (value, key) => {
+    if (isSortValue(value))
+        return;
+    throw new RuntimeError(TABLE_ERROR_CODES.UNSORTABLE_COLUMN_VALUE, `[et-table] Sorting read a ${Array.isArray(value) ? 'list' : typeof value} from the "${key}" column's value, which cannot be compared. Add \`sortValue\` to the column.`);
+};
 const compare = (a, b) => {
     if (isMissing(a) && isMissing(b))
         return 0;
@@ -68015,7 +68425,8 @@ const compare = (a, b) => {
  * `value` accessor). Stable, multi-key, pure and tree-shakable - the base table
  * doesn't apply it unless in client sort mode; import it directly for custom flows.
  * Server-side callers ignore this and let the backend sort instead. Nullish values,
- * `NaN` and invalid dates always sink to the bottom, regardless of direction.
+ * `NaN` and invalid dates always sink to the bottom, regardless of direction. In dev mode, a column
+ * without `sortValue` whose `value` returns an object, list or function throws `ET3514`.
  */
 const sortRows = ({ rows, sort, columns }) => {
     if (!sort.length)
@@ -68028,6 +68439,10 @@ const sortRows = ({ rows, sort, columns }) => {
             const accessor = column.sortValue ?? column.value;
             const valueA = accessor(rowA);
             const valueB = accessor(rowB);
+            if (isDevMode$1() && !column.sortValue) {
+                assertSortValue(valueA, key);
+                assertSortValue(valueB, key);
+            }
             if (isMissing(valueA) || isMissing(valueB)) {
                 const nullCmp = compare(valueA, valueB);
                 if (nullCmp !== 0)
@@ -69154,6 +69569,44 @@ class TableComponent {
             return { start: window.paddingStart(), end: window.paddingEnd() };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "spacers" }] : /* istanbul ignore next */ []));
+        this.openDetailIndices = computed(() => {
+            const detail = this.rowDetail();
+            if (!detail || !this.rowWindow())
+                return [];
+            const indices = [];
+            this.rows().forEach((row, index) => {
+                if (detail.isOpen(row))
+                    indices.push(index);
+            });
+            return indices;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openDetailIndices" }] : /* istanbul ignore next */ []));
+        this.measuredDetailHeights = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "measuredDetailHeights" }] : /* istanbul ignore next */ []));
+        this.openDetailHeights = computed(() => {
+            const open = this.openDetailIndices();
+            if (!open.length)
+                return new Map();
+            const measured = this.measuredDetailHeights();
+            const rows = this.rows();
+            const fallback = measured.size
+                ? [...measured.values()].reduce((sum, height) => sum + height, 0) / measured.size
+                : 0;
+            return new Map(open.map((index) => [index, measured.get(this.rowIdentity(rows[index])) ?? fallback]));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openDetailHeights" }] : /* istanbul ignore next */ []));
+        this.headerRowCount = computed(() => this.headerRows().length + 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerRowCount" }] : /* istanbul ignore next */ []));
+        /**
+         * The full row count a windowed table announces through `aria-rowcount` - header rows, every body row,
+         * every open detail row and the footer row - or `null` while every row is in the DOM anyway.
+         */
+        this.ariaRowCount = computed(() => {
+            if (!this.spacers())
+                return null;
+            return this.headerRowCount() + this.rows().length + this.openDetailIndices().length + (this.hasFooter() ? 1 : 0);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaRowCount" }] : /* istanbul ignore next */ []));
         this.bodyRows = computed(() => {
             const pinning = this.columnPinning();
             const templates = this.columnTemplates().cell;
@@ -69172,6 +69625,7 @@ class TableComponent {
             const rendered = this.renderedRows();
             // A footer row separates itself with this rule, and an end spacer stands in for rows still below.
             const endsWithRows = !this.hasFooter() && !this.spacers()?.end;
+            const announcesIndex = this.ariaRowCount() !== null;
             return rendered.map((row, index) => {
                 const key = this.rowIdentity(row);
                 const link = rowLink?.(row) ?? null;
@@ -69192,6 +69646,7 @@ class TableComponent {
                     stripe: (indexOffset + index) % 2 === 1,
                     last: endsWithRows && index === rendered.length - 1,
                     detail: detail?.isOpen(row) ? detail : null,
+                    ariaRowIndex: announcesIndex ? this.ariaRowIndexOf(indexOffset + index) : null,
                     leads,
                     trails,
                     cells: columns.map((column) => {
@@ -69220,6 +69675,8 @@ class TableComponent {
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "bodyRows" }] : /* istanbul ignore next */ []));
+        this.detailAriaRowIndices = computed(() => new Map(this.bodyRows().flatMap((vm) => (vm.detail && vm.ariaRowIndex ? [[vm.row, vm.ariaRowIndex + 1]] : []))), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "detailAriaRowIndices" }] : /* istanbul ignore next */ []));
         /**
          * The keys of the currently hidden columns, in declared order. Nothing in the table's own chrome
          * shows a hidden column - the column menu's "Hide column" takes one away and has no way back - so
@@ -69339,6 +69796,21 @@ class TableComponent {
             afterNextRender({ read: () => this.syncScrollState() }, { injector: this.injector });
         });
     }
+    /** The `aria-rowindex` of an open row's detail row, or `null` while every row is in the DOM. Part of the feature contract. */
+    detailAriaRowIndex(row) {
+        return this.detailAriaRowIndices().get(row) ?? null;
+    }
+    /** Record a detail row's rendered height. Part of the feature contract. */
+    setDetailRowHeight(row, height) {
+        const key = this.rowIdentity(row);
+        if (this.measuredDetailHeights().get(key) === height)
+            return;
+        this.measuredDetailHeights.update((heights) => new Map(heights).set(key, height));
+    }
+    /** The height each open detail row adds, by absolute row index. Part of the feature contract. */
+    detailRowHeights() {
+        return this.openDetailHeights();
+    }
     syncScrollState() {
         const element = this.scrollElement();
         // `scrollLeft` counts down from 0 in RTL, so compare distances rather than raw offsets.
@@ -69698,10 +70170,16 @@ class TableComponent {
     /**
      * Set a column's sort direction outright, or clear it with `null` - what a column menu's explicit
      * "Sort ascending / descending / Clear" entries need, where {@link toggleSort}'s cycle would make
-     * the result depend on the column's current state. Layers like a plain header activation does.
+     * the result depend on the column's current state. Layers like a plain header activation does;
+     * clearing drops only this column's entry from a layered sort.
      */
     setSort(key, direction) {
-        this.applySort(this.nextSort({ key, direction, additive: false }));
+        if (direction) {
+            this.applySort(this.nextSort({ key, direction, additive: false }));
+        }
+        else if (this.sort().some((entry) => entry.key === key)) {
+            this.applySort(this.sort().filter((entry) => entry.key !== key));
+        }
     }
     activateSortHeader(key, event) {
         if (event instanceof KeyboardEvent)
@@ -69975,6 +70453,19 @@ class TableComponent {
             return next;
         });
     }
+    ariaRowIndexOf(index) {
+        const open = this.openDetailIndices();
+        let low = 0;
+        let high = open.length;
+        while (low < high) {
+            const mid = (low + high) >> 1;
+            if ((open[mid] ?? Infinity) < index)
+                low = mid + 1;
+            else
+                high = mid;
+        }
+        return this.headerRowCount() + index + low + 1;
+    }
     // Must stay a same-tick write on the header grid. A requestAnimationFrame hop defers it past the
     // paint the body already moved in, so the header trails a whole frame; and the property inherits,
     // so writing it on the host recalculates style for every row cell, which only the header reads.
@@ -70075,10 +70566,10 @@ class TableComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "attr.role": "pageStickyHeader() ? tableRole() : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "class.et-table-host--header-adornments": "headerAdornments().length > 0", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "attr.role": "pageStickyHeader() ? tableRole() : null", "attr.aria-rowcount": "pageStickyHeader() ? ariaRowCount() : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "class.et-table-host--header-adornments": "headerAdornments().length > 0", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
             { provide: TABLE_FEATURE_HOST, useExisting: TableComponent },
             provideIcons(ARROW_UP_ICON, TRIANGLE_EXCLAMATION_ICON),
-        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "gridCells", predicate: ["gridCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div [attr.role]=\"cellRole()\" class=\"et-table-error-cell\" aria-live=\"polite\">\n        @if (showErrorMessage()) {\n          @if (errorTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: resolvedError() }\" />\n          } @else {\n            <ng-content select=\"[etTableError]\">\n              <i [etProvideColor]=\"errorColorTheme()\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n              <span>{{ resolvedLabels().error }}</span>\n            </ng-content>\n          }\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            #gridCell\n            [class]=\"lead.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            #gridCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme()\"\n                    [attr.title]=\"cell.message\"\n                    [label]=\"cell.message\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            #gridCell\n            [class]=\"trail.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div [attr.role]=\"cellRole()\" class=\"et-table-empty-cell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" [attr.role]=\"tableRole()\" class=\"et-table\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px rgb(var(--et-shadow-color-rgb, 0 0 0) / .04),0 6px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / .06)}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-table-header-color, var(--et-surface-color-muted-solid, CanvasText));background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{min-block-size:var(--et-table-row-min-block-size, auto);border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "gridCells", predicate: ["gridCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div [attr.aria-rowindex]=\"ariaRowCount() === null ? null : headerRowCount()\" class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div [attr.role]=\"cellRole()\" class=\"et-table-error-cell\" aria-live=\"polite\">\n        @if (showErrorMessage()) {\n          @if (errorTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: resolvedError() }\" />\n          } @else {\n            <ng-content select=\"[etTableError]\">\n              <i [etProvideColor]=\"errorColorTheme()\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n              <span>{{ resolvedLabels().error }}</span>\n            </ng-content>\n          }\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        [attr.aria-rowindex]=\"rowVm.ariaRowIndex\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            #gridCell\n            [class]=\"lead.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            #gridCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme()\"\n                    [attr.title]=\"cell.message\"\n                    [label]=\"cell.message\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            #gridCell\n            [class]=\"trail.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div [attr.role]=\"cellRole()\" class=\"et-table-empty-cell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div [attr.aria-rowindex]=\"ariaRowCount()\" class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div\n    #grid\n    [style.grid-template-columns]=\"templateColumns()\"\n    [attr.role]=\"tableRole()\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    class=\"et-table\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px rgb(var(--et-shadow-color-rgb, 0 0 0) / .04),0 6px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / .06)}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-table-header-color, var(--et-surface-color-muted-solid, CanvasText));background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{min-block-size:var(--et-table-row-min-block-size, auto);border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -70091,6 +70582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-density]': 'density()',
                         '[attr.aria-busy]': 'resolvedLoading() ? "true" : null',
                         '[attr.role]': 'pageStickyHeader() ? tableRole() : null',
+                        '[attr.aria-rowcount]': 'pageStickyHeader() ? ariaRowCount() : null',
                         '[class.et-table-host--scrolled-block-start]': 'blockScrollShadows().blockStart',
                         '[class.et-table-host--scrolled-block-end]': 'blockScrollShadows().blockEnd',
                         '[class.et-table-host--scrolled-inline-start]': 'scrollFades().start',
@@ -70098,7 +70590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[class.et-table-host--header-adornments]': 'headerAdornments().length > 0',
                         '[style.--_et-table-viewport-inline-size.px]': 'viewportInlineSize()',
                         '(scroll)': 'syncScrollState()',
-                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div [attr.role]=\"cellRole()\" class=\"et-table-error-cell\" aria-live=\"polite\">\n        @if (showErrorMessage()) {\n          @if (errorTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: resolvedError() }\" />\n          } @else {\n            <ng-content select=\"[etTableError]\">\n              <i [etProvideColor]=\"errorColorTheme()\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n              <span>{{ resolvedLabels().error }}</span>\n            </ng-content>\n          }\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            #gridCell\n            [class]=\"lead.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            #gridCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme()\"\n                    [attr.title]=\"cell.message\"\n                    [label]=\"cell.message\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            #gridCell\n            [class]=\"trail.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div [attr.role]=\"cellRole()\" class=\"et-table-empty-cell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div #grid [style.grid-template-columns]=\"templateColumns()\" [attr.role]=\"tableRole()\" class=\"et-table\">\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px rgb(var(--et-shadow-color-rgb, 0 0 0) / .04),0 6px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / .06)}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-table-header-color, var(--et-surface-color-muted-solid, CanvasText));background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{min-block-size:var(--et-table-row-min-block-size, auto);border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
+                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div [attr.aria-rowindex]=\"ariaRowCount() === null ? null : headerRowCount()\" class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.data-disabled]=\"cell.disabled || null\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            [attr.aria-description]=\"cell.priorityLabel\"\n            [disabled]=\"cell.disabled\"\n            (click)=\"activateSortHeader(cell.key, $event)\"\n            (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n              @if (cell.direction; as direction) {\n                <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                     swapping; only appearing and disappearing are the fade, and only for a sort the user\n                     just asked for (see sortIndicatorEnter). -->\n                <i\n                  [attr.data-direction]=\"direction\"\n                  [animate.enter]=\"sortIndicatorEnter()\"\n                  [animate.leave]=\"sortIndicatorLeave()\"\n                  class=\"et-table-sort-indicator\"\n                  etIcon=\"et-arrow-up\"\n                ></i>\n              }\n              @if (cell.priority; as priority) {\n                <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n              }\n            </span>\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            <span class=\"et-table-header-label-box\">\n              @if (cell.template; as headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n              }\n            </span>\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured && headerAdornments().length) {\n          <div class=\"et-table-header-adornments\">\n            @for (adornment of headerAdornments(); track $index) {\n              <ng-container\n                *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n              />\n            }\n          </div>\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<ng-template #bodyContent>\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div [attr.role]=\"cellRole()\" class=\"et-table-error-cell\" aria-live=\"polite\">\n        @if (showErrorMessage()) {\n          @if (errorTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: resolvedError() }\" />\n          } @else {\n            <ng-content select=\"[etTableError]\">\n              <i [etProvideColor]=\"errorColorTheme()\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n              <span>{{ resolvedLabels().error }}</span>\n            </ng-content>\n          }\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--card]=\"cardRows()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [etTableCardSurface]=\"cardRows()\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        [attr.aria-rowindex]=\"rowVm.ariaRowIndex\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            #gridCell\n            [class]=\"lead.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            #gridCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme()\"\n                    [attr.title]=\"cell.message\"\n                    [label]=\"cell.message\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            #gridCell\n            [class]=\"trail.cellClass\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            [attr.role]=\"cellRole()\"\n            class=\"et-table-cell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (cardRows()) {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div [attr.role]=\"cellRole()\" class=\"et-table-empty-cell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div [attr.aria-rowindex]=\"ariaRowCount()\" class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          [attr.role]=\"cellRole()\"\n          class=\"et-table-footer-cell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</ng-template>\n\n@if (pageStickyHeader()) {\n  <div class=\"et-table-header-strip\" role=\"presentation\">\n    <div\n      #headerGrid\n      [style.grid-template-columns]=\"pageHeaderColumns()\"\n      class=\"et-table et-table-header\"\n      role=\"rowgroup\"\n    >\n      <ng-container *ngTemplateOutlet=\"headerContent\" />\n    </div>\n  </div>\n  <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n    <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n      <ng-container *ngTemplateOutlet=\"bodyContent\" />\n    </div>\n  </div>\n} @else {\n  <div\n    #grid\n    [style.grid-template-columns]=\"templateColumns()\"\n    [attr.role]=\"tableRole()\"\n    [attr.aria-rowcount]=\"ariaRowCount()\"\n    class=\"et-table\"\n  >\n    <ng-container *ngTemplateOutlet=\"headerContent\" />\n    <ng-container *ngTemplateOutlet=\"bodyContent\" />\n  </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px rgb(var(--et-shadow-color-rgb, 0 0 0) / .04),0 6px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / .06)}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-table-header-color, var(--et-surface-color-muted-solid, CanvasText));background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{min-block-size:var(--et-table-row-min-block-size, auto);border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], cellState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellState", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], quickFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilter", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], headerGridRef: [{ type: i0.ViewChild, args: ['headerGrid', { isSignal: true }] }], scrollerRef: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], gridCells: [{ type: i0.ViewChildren, args: ['gridCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
 
 /**
@@ -70554,6 +71046,9 @@ class TableColumnMenuDirective {
         return (this.config().hideColumn ?? true) && this.table.visibleColumnsMeta().length > 1;
     }
     hide(column) {
+        this.table.setSort(column.key, null);
+        if (this.table.filterValuesFor(column.key).length)
+            this.table.setFilterValues(column.key, []);
         this.table.setColumnVisible(column.key, false);
     }
     canPin() {
@@ -71175,9 +71670,16 @@ class TableRowDetailComponent {
         ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
         this.animated = computed(() => this.expansion.animates(this.row()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
+        this.dimensions = signalHostElementDimensions();
+        effect(() => {
+            const height = this.dimensions().offset?.height;
+            const row = this.row();
+            if (height !== undefined)
+                untracked(() => this.table.setDetailRowHeight(row, height));
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableRowDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TableRowDetailComponent, isStandalone: true, selector: "et-table-row-detail", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "animate.enter": "animated() ? 'et-table-detail--enter' : ''", "animate.leave": "animated() ? 'et-table-detail--leave' : ''" }, classAttribute: "et-table-detail-row" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TableRowDetailComponent, isStandalone: true, selector: "et-table-row-detail", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "row" }, properties: { "attr.aria-rowindex": "table.detailAriaRowIndex(row())", "animate.enter": "animated() ? 'et-table-detail--enter' : ''", "animate.leave": "animated() ? 'et-table-detail--leave' : ''" }, classAttribute: "et-table-detail-row" }, ngImport: i0, template: `
     <!-- The clip window the animating track squeezes to nothing, and the body that carries the padding.
          Two elements on purpose - see table-detail-styles.component.css. -->
     <div [attr.role]="table.cellRole()" class="et-table-detail-cell">
@@ -71205,13 +71707,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     host: {
                         class: 'et-table-detail-row',
                         role: 'row',
+                        '[attr.aria-rowindex]': 'table.detailAriaRowIndex(row())',
                         // Animated only for the row the user just toggled - a re-mount from paging/sorting must not replay
                         // the reveal (see TableRowExpansionDirective.animates).
                         '[animate.enter]': "animated() ? 'et-table-detail--enter' : ''",
                         '[animate.leave]': "animated() ? 'et-table-detail--leave' : ''",
                     },
                 }]
-        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
 /** Covers the 0.18s detail-row enter/leave animations in the CSS - see {@link TableRowExpansionDirective.animates}. */
 const DETAIL_ANIMATION_MS = 200;
@@ -73496,6 +73999,7 @@ class TableVirtualScrollDirective {
             itemCount: computed(() => this.table.rows().length),
             estimateItemHeight: computed(() => this.config().estimateRowHeight ?? 48),
             overscan: computed(() => this.config().overscan ?? 6),
+            extraItemHeights: computed(() => this.table.detailRowHeights()),
         });
         injectStyleManager().mount(TableVirtualScrollStylesComponent);
         this.table.registerRowWindow({
@@ -74411,9 +74915,17 @@ class TabGroupDirective {
         this.sessionMemoryKey = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sessionMemoryKey" }] : /* istanbul ignore next */ []));
         this.sessionMemoryAvailable = canUseSessionMemory();
-        /** @internal */
-        this.panels = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+        this.registeredPanels = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "registeredPanels" }] : /* istanbul ignore next */ []));
+        this.childMutations = signalElementMutations(inject(ElementRef), {
+            childList: true,
+            subtree: true,
+        });
+        /** @internal The panels in DOM order, which a keyed `@for` can change without re-registering any. */
+        this.panels = computed(() => {
+            this.childMutations();
+            return sortByDomOrder(this.registeredPanels(), (panel) => panel.hostElement);
+        }, { ...(ngDevMode ? { debugName: "panels" } : /* istanbul ignore next */ {}), equal: isSameOrder$1 });
         /** @internal Set by composing components (e.g. et-tab-group) that render panel content themselves instead of registering [etTabPanel] directives. */
         this.managesPanelsInternally = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "managesPanelsInternally" }] : /* istanbul ignore next */ []));
@@ -74496,18 +75008,19 @@ class TabGroupDirective {
     }
     /** @internal */
     registerPanel(panel) {
-        this.panels.update((list) => [...list, panel]);
+        this.registeredPanels.update((list) => [...list, panel]);
     }
     /** @internal */
     unregisterPanel(panel) {
-        this.panels.update((list) => list.filter((p) => p !== panel));
+        this.registeredPanels.update((list) => list.filter((p) => p !== panel));
     }
     resolveSelectedIndex(index) {
         const triggers = this.tabBar.triggers();
         if (triggers.length === 0) {
             return null;
         }
-        const clampedIndex = Math.min(Math.max(index, 0), triggers.length - 1);
+        const wholeIndex = Number.isFinite(index) ? Math.trunc(index) : 0;
+        const clampedIndex = Math.min(Math.max(wholeIndex, 0), triggers.length - 1);
         const selectedTrigger = triggers[clampedIndex];
         if (selectedTrigger && !selectedTrigger.disabled()) {
             return clampedIndex;
@@ -74554,6 +75067,7 @@ let nextPanelId = 0;
 class TabPanelDirective {
     constructor() {
         this.tabGroup = inject(TAB_GROUP_TOKEN, { optional: true });
+        /** @internal */
         this.hostElement = injectHostElement();
         this.triggerId = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
@@ -75878,11 +76392,11 @@ 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.67';
+const COMPONENTS_VERSION = '1.0.0-next.69';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACCESSIBLE_NAME_INPUTS, ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALERT_DIALOG_LABELS, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_LABELS, AVATAR_SHAPES, AVATAR_SIZES, AccessibleNameControlDirective, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DEFAULTS, BRACKET_DEFAULT_CARDS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_PARTICIPANTS_IMPORTS, BRACKET_PICK_CARD_IMPORTS, BRACKET_PICK_CARD_NOTE_TONE, BRACKET_ROUNDS_LIST_IMPORTS, BRACKET_ROUND_HEADER_ALIGN, BRACKET_SKELETON_IMPORTS, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BarChartComponent, BarChartDirective, BarChartPlotDirective, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketParticipantsComponent, BracketPickCardComponent, BracketRoundsListComponent, BracketSkeletonComponent, BracketSkeletonContinueComponent, BracketSkeletonFinalMatchComponent, BracketSkeletonMatchComponent, BracketSkeletonRoundHeaderComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHART_ERROR_CODES, CHART_IMPORTS, CHART_LABELS, CHART_PLOT_HOST, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHIP_REMOVE_FOCUS_FALLBACK, CHIP_REMOVE_TAB_STOP, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_ERROR_CODES, COLOR_INPUT_IMPORTS, COLOR_INPUT_LABELS, COLOR_INPUT_TOKEN, COLOR_NOTATIONS, COLOR_NOTATION_ORDER, COMMAND_PALETTE_ERROR_CODES, COMMAND_PALETTE_IMPORTS, COMMAND_PALETTE_LABELS, COMMAND_PALETTE_OVERLAY, COMMAND_PALETTE_REGISTRY, COMMAND_PALETTE_TOKEN, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, COPY_BUTTON_LABELS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, ChartPlotDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ColorPickerAreaDirective, ColorPickerChannelDirective, ColorPickerPanelComponent, ColorPickerSurfaceDirective, ColorPickerTriggerDirective, CommandPaletteComponent, CommandPaletteDirective, CommandPaletteItemComponent, CommandPaletteSearchDirective, CommandPaletteShortcutDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_FORMAT, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, DEFAULT_ALERT_DIALOG_LABELS, DEFAULT_AVATAR_LABELS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHART_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_COLOR_INPUT_LABELS, DEFAULT_COMMAND_PALETTE_LABELS, DEFAULT_COPY_BUTTON_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_DROPZONE_MAX_PREVIEW_FILE_SIZE, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_DEFAULTS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_KBD_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PROGRESS_STEP_LABELS, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STAT_TILE_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DEFAULT_TREE_LABELS, DEFAULT_UNSAVED_CHANGES_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DateTimeRangeInputComponent, DateTimeRangeInputDirective, DateTimeRangeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYEDROPPER_ICON, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_IMPORTS, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_COMMAND_PALETTE_LABELS, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS$1 as INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_LABELS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINE_CHART_ERROR_CODES, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_IMPORTS, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, LineChartComponent, LineChartDirective, LineChartSliceDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SEARCH_IMPORTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuItemSubmenuIconComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STACK_OVERLAY_LAYER, NOTIFICATION_STATUS, NO_STREAM_PLAYER_CAPABILITIES, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabLinkStylesComponent, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HAS_BACKDROP, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_NAV_TAB_IMPORTS, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PAGINATION_SIZES, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIE_CHART_ERROR_CODES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_LABELS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PagedQueryTriggerDirective, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PieChartComponent, PieChartDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryButtonDirective, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_ERROR_CODES, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, RichTextViewerComponent, SANKEY_CHART_ERROR_CODES, SCHEDULER_EDIT_SURFACE_IMPORTS, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SCROLLBAR_ERROR_CODES, SCROLLBAR_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, SELECTION_LIST_ERROR_CODES, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STANDINGS_PICK_IMPORTS, STAR_ICON, STAT_TILE_IMPORTS, STAT_TILE_LABELS, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_DEFAULT_COMPONENTS, STREAM_ERROR_CODES, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWITCH_IMPORTS, SankeyChartComponent, SankeyChartDirective, SankeyChartMarkDirective, SchedulerActionAddAppointmentDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditAddSubAppointmentItemComponent, SchedulerEditColorComponent, SchedulerEditDeleteItemComponent, SchedulerEditDescriptionComponent, SchedulerEditLocationComponent, SchedulerEditSurfaceActionsComponent, SchedulerEditSurfaceBreadcrumbComponent, SchedulerEditSurfaceChildrenComponent, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditSurfaceFieldsComponent, SchedulerEditSurfaceFooterComponent, SchedulerEditSurfaceHeaderComponent, SchedulerEditTimeRangeComponent, SchedulerEditTitleComponent, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, ScrollbarComponent, ScrollbarDirective, ScrollbarThumbDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectAllOptionComponent, SelectAllOptionDirective, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StandingsPickComponent, StandingsPickDirective, StandingsPickMarkDirective, StatTileComponent, StatTileSparklineComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_DRAG_SCROLL_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_PAGE_STICKY_HEADER_IMPORTS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_ROW_ROUTER_LINK_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TEXT_FIELD_CONTROL_INPUTS, THUMBTACK_ICON, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TIME_RANGE_INPUT_ERROR_CODES, TIME_RANGE_INPUT_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LABELS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCardSurfaceDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableDragScrollDirective, TableDragScrollStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TablePageStickyHeaderDirective, TablePageStickyHeaderStylesComponent, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowBoxStylesComponent, TableRowDetailComponent, TableRowExpansionDirective, TableRowRouterLinkDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableStickyColumnsStylesComponent, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerComponent, TimePickerDirective, TimePickerRingDirective, TimePickerRingHandleDirective, TimeRangeInputComponent, TimeRangeInputDirective, TimeRangeInputFieldDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNSAVED_CHANGES_LABELS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, canonicalKbdKey, cascaderFromQuery, centeredOverlayStrategy, clearLeavingSupportStateOnExit, colorContrast, commandPaletteLabelsForLocale, countDescendants, createAlertDialogOpener, createAnchoredPanelController, createCardMask, createCommandPaletteOpener, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlaySingleSlot, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createSchedulerRegistry, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableRowsState, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, dateBounds, dateRangeBounds, dateRangeOrder, dateTimeBounds, dateTimeRangeBounds, dateTimeRangeOrder, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defaultSankeyChartLinkKeyHint, defineOverlay, defineQueryParamOverlay, describeBracketSlot, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, filterValues, findNextRelevantHtmlElement, focusFirstInvalidField, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFromEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hitsInteractiveElement, iconRegistryKey, injectAlertDialogLabels, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectAvatarLabels, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChartLabels, injectChipLabels, injectColorInputLabels, injectCommandPalette, injectCommandPaletteLabels, injectCommandPaletteRegistry, injectCopyButtonLabels, injectDateFormat, injectDateLocale, injectDateTimeFormat, injectDateTimeLabels, injectDateTimeZone, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldDefaults, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectKbdLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectProgressStepLabels, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurface, injectSchedulerEditSurfaceOpener, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStatTileLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamPlayerSlot, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, injectTreeLabels, injectUnsavedChangesLabels, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isRestorableTableState, isTargetInsideOverlayTree, isTouchEvent, kbdKeyLabel, kbdKeyName, lastDaysPreset, lastMonthPreset, lastWeekPreset, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, matchCountryByDialCode, matchParticipantDisplayName, matchedDialPrefix, matchesKbdChord, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mergeTableCsvExportOptions, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, missingStreamSourceError, mountNavTabLinkStyles, nextDaysPreset, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, overlayResult, paginate, parseKbdKeys, phoneCountryFlag, phoneCountryName, provideAlertDialogLabels, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideAvatarLabels, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChartLabels, provideChipLabels, provideColorInputLabels, provideCommandPaletteLabels, provideCommandPaletteRegistry, provideCopyButtonLabels, provideDateFormat, provideDateLocale, provideDateTimeFormat, provideDateTimeLabels, provideDateTimeZone, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldDefaults, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideKbdLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideProgressStepLabels, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTool, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerEditSurface, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStatTileLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPip, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, provideTreeLabels, provideUnsavedChangesAlertDialog, provideUnsavedChangesLabels, queryButtonSourceFromV2Query, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, quickFilterRows, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerCommands, registerSingleton, requiredLanguages, resolveBracketLayout, resolveClosestOverlay, resolveFilterOverlaySubmitButton, resolveNormalizedMatchSideState, resolveNotificationStatusIcon, resolveOverlayHasBackdrop, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, singleEliminationBracketLayout, sortRows, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, thisMonthPreset, thisWeekPreset, thisYearPreset, timeBounds, timeRangeBounds, timeRangeOrder, toFieldWarnings, toGridPosition, toNotificationContent, toPictureDimension, todayPreset, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl, yesterdayPreset };
+export { ACCESSIBLE_NAME_INPUTS, ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALERT_DIALOG_LABELS, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_LABELS, AVATAR_SHAPES, AVATAR_SIZES, AccessibleNameControlDirective, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DEFAULTS, BRACKET_DEFAULT_CARDS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_PARTICIPANTS_IMPORTS, BRACKET_PICK_CARD_IMPORTS, BRACKET_PICK_CARD_NOTE_TONE, BRACKET_ROUNDS_LIST_IMPORTS, BRACKET_ROUND_HEADER_ALIGN, BRACKET_SKELETON_IMPORTS, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BarChartComponent, BarChartDirective, BarChartPlotDirective, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketParticipantsComponent, BracketPickCardComponent, BracketRoundsListComponent, BracketSkeletonComponent, BracketSkeletonContinueComponent, BracketSkeletonFinalMatchComponent, BracketSkeletonMatchComponent, BracketSkeletonRoundHeaderComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHART_ERROR_CODES, CHART_IMPORTS, CHART_LABELS, CHART_PLOT_HOST, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHIP_REMOVE_FOCUS_FALLBACK, CHIP_REMOVE_TAB_STOP, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_ERROR_CODES, COLOR_INPUT_IMPORTS, COLOR_INPUT_LABELS, COLOR_INPUT_TOKEN, COLOR_NOTATIONS, COLOR_NOTATION_ORDER, COMMAND_PALETTE_ERROR_CODES, COMMAND_PALETTE_IMPORTS, COMMAND_PALETTE_LABELS, COMMAND_PALETTE_OVERLAY, COMMAND_PALETTE_REGISTRY, COMMAND_PALETTE_TOKEN, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, COPY_BUTTON_LABELS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, ChartPlotDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ColorPickerAreaDirective, ColorPickerChannelDirective, ColorPickerPanelComponent, ColorPickerSurfaceDirective, ColorPickerTriggerDirective, CommandPaletteComponent, CommandPaletteDirective, CommandPaletteItemComponent, CommandPaletteSearchDirective, CommandPaletteShortcutDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_FORMAT, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, DEFAULT_ALERT_DIALOG_LABELS, DEFAULT_AVATAR_LABELS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHART_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_COLOR_INPUT_LABELS, DEFAULT_COMMAND_PALETTE_LABELS, DEFAULT_COPY_BUTTON_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_DROPZONE_MAX_PREVIEW_FILE_SIZE, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_DEFAULTS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_KBD_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PROGRESS_STEP_LABELS, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STAT_TILE_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DEFAULT_TREE_LABELS, DEFAULT_UNSAVED_CHANGES_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DateTimeRangeInputComponent, DateTimeRangeInputDirective, DateTimeRangeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYEDROPPER_ICON, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_IMPORTS, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_COMMAND_PALETTE_LABELS, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS$1 as INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_LABELS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINE_CHART_ERROR_CODES, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_IMPORTS, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, LineChartComponent, LineChartDirective, LineChartSliceDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SEARCH_IMPORTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuItemSubmenuIconComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STACK_OVERLAY_LAYER, NOTIFICATION_STATUS, NO_STREAM_PLAYER_CAPABILITIES, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabLinkStylesComponent, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HAS_BACKDROP, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_NAV_TAB_IMPORTS, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PAGINATION_SIZES, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIE_CHART_ERROR_CODES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_LABELS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PagedQueryTriggerDirective, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PieChartComponent, PieChartDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryButtonDirective, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_ERROR_CODES, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, RichTextViewerComponent, SANKEY_CHART_ERROR_CODES, SCHEDULER_EDIT_SURFACE_IMPORTS, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SCROLLBAR_ERROR_CODES, SCROLLBAR_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, SELECTION_LIST_ERROR_CODES, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STANDINGS_PICK_IMPORTS, STAR_ICON, STAT_TILE_IMPORTS, STAT_TILE_LABELS, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_DEFAULT_COMPONENTS, STREAM_ERROR_CODES, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWITCH_IMPORTS, SankeyChartComponent, SankeyChartDirective, SankeyChartMarkDirective, SchedulerActionAddAppointmentDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditAddSubAppointmentItemComponent, SchedulerEditColorComponent, SchedulerEditDeleteItemComponent, SchedulerEditDescriptionComponent, SchedulerEditLocationComponent, SchedulerEditSurfaceActionsComponent, SchedulerEditSurfaceBreadcrumbComponent, SchedulerEditSurfaceChildrenComponent, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditSurfaceFieldsComponent, SchedulerEditSurfaceFooterComponent, SchedulerEditSurfaceHeaderComponent, SchedulerEditTimeRangeComponent, SchedulerEditTitleComponent, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, ScrollbarComponent, ScrollbarDirective, ScrollbarThumbDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectAllOptionComponent, SelectAllOptionDirective, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StandingsPickComponent, StandingsPickDirective, StandingsPickMarkDirective, StatTileComponent, StatTileSparklineComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_DRAG_SCROLL_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_PAGE_STICKY_HEADER_IMPORTS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_ROW_ROUTER_LINK_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TEXT_FIELD_CONTROL_INPUTS, THUMBTACK_ICON, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TIME_RANGE_INPUT_ERROR_CODES, TIME_RANGE_INPUT_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LABELS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCardSurfaceDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableDragScrollDirective, TableDragScrollStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TablePageStickyHeaderDirective, TablePageStickyHeaderStylesComponent, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowBoxStylesComponent, TableRowDetailComponent, TableRowExpansionDirective, TableRowRouterLinkDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableStickyColumnsStylesComponent, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerComponent, TimePickerDirective, TimePickerRingDirective, TimePickerRingHandleDirective, TimeRangeInputComponent, TimeRangeInputDirective, TimeRangeInputFieldDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNSAVED_CHANGES_LABELS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, canonicalKbdKey, cascaderFromQuery, centeredOverlayStrategy, clearLeavingSupportStateOnExit, colorContrast, commandPaletteLabelsForLocale, countDescendants, createAlertDialogOpener, createAnchoredPanelController, createCardMask, createCommandPaletteOpener, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlaySingleSlot, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createSchedulerRegistry, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableRowsState, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, dateBounds, dateRangeBounds, dateRangeOrder, dateTimeBounds, dateTimeRangeBounds, dateTimeRangeOrder, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defaultSankeyChartLinkKeyHint, defineOverlay, defineQueryParamOverlay, describeBracketSlot, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, filterValues, findNextRelevantHtmlElement, focusFirstInvalidField, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFromEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hitsInteractiveElement, iconRegistryKey, injectAlertDialogLabels, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectAvatarLabels, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChartLabels, injectChipLabels, injectColorInputLabels, injectCommandPalette, injectCommandPaletteLabels, injectCommandPaletteRegistry, injectCopyButtonLabels, injectDateFormat, injectDateLocale, injectDateTimeFormat, injectDateTimeLabels, injectDateTimeZone, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldDefaults, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectKbdLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectProgressStepLabels, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurface, injectSchedulerEditSurfaceOpener, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStatTileLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamPlayerSlot, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, injectTreeLabels, injectUnsavedChangesLabels, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isRestorableTableState, isTargetInsideOverlayTree, isTouchEvent, kbdKeyLabel, kbdKeyName, lastDaysPreset, lastMonthPreset, lastWeekPreset, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, matchCountryByDialCode, matchParticipantDisplayName, matchedDialPrefix, matchesKbdChord, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mergeTableCsvExportOptions, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, missingStreamSourceError, mountNavTabLinkStyles, nextDaysPreset, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, overlayResult, paginate, parseKbdKeys, phoneCountryFlag, phoneCountryName, provideAlertDialogLabels, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideAvatarLabels, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChartLabels, provideChipLabels, provideColorInputLabels, provideCommandPaletteLabels, provideCommandPaletteRegistry, provideCopyButtonLabels, provideDateFormat, provideDateLocale, provideDateTimeFormat, provideDateTimeLabels, provideDateTimeZone, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldDefaults, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideKbdLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideProgressStepLabels, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTool, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerEditSurface, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStatTileLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPip, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, provideTreeLabels, provideUnsavedChangesAlertDialog, provideUnsavedChangesLabels, queryButtonSourceFromV2Query, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, quickFilterRows, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerCommands, registerSingleton, rejectionMessage, requiredLanguages, resolveBracketLayout, resolveClosestOverlay, resolveFilterOverlaySubmitButton, resolveNormalizedMatchSideState, resolveNotificationStatusIcon, resolveOverlayHasBackdrop, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, singleEliminationBracketLayout, sortRows, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, thisMonthPreset, thisWeekPreset, thisYearPreset, timeBounds, timeRangeBounds, timeRangeOrder, toFieldWarnings, toGridPosition, toNotificationContent, toPictureDimension, todayPreset, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl, yesterdayPreset };
 //# sourceMappingURL=ethlete-components.mjs.map