@ethlete/components 1.0.0-next.56 → 1.0.0-next.58
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +20 -0
- package/fesm2022/ethlete-components.mjs +512 -105
- package/fesm2022/ethlete-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ethlete-components.d.ts +276 -99
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Injector, output, runInInjectionContext, contentChild, NgZone, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, createComponent, isSignal, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, afterRenderEffect, outputBinding, afterEveryRender, PLATFORM_ID } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ethlete/core';
|
|
4
|
-
import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, enableAnchoredOverlayPositionExtras, randomId, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, copyToClipboard, isOnHigherOverlayLayer, injectAnimatedBlockSize, injectObserveBreakpoint, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, dragGestureFrom, createFlipAnimation, createObjectUrlHandle, createFlipAnimationGroup, focusElement, isFocusable, getFocusableElements, injectFocusVisibleTracker, htmlToMarkdown, markdownToHtml, injectHasTouchInput, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
|
|
4
|
+
import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, injectBreakpointObserver, isHTMLElement, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, enableAnchoredOverlayPositionExtras, randomId, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, applyHostListener, injectQueryParam, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, copyToClipboard, isOnHigherOverlayLayer, injectAnimatedBlockSize, injectObserveBreakpoint, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, dragGestureFrom, createFlipAnimation, createObjectUrlHandle, createFlipAnimationGroup, focusElement, isFocusable, getFocusableElements, injectFocusVisibleTracker, htmlToMarkdown, markdownToHtml, injectHasTouchInput, signalHostElementDimensions, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectColorPalette, applyHostListeners, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
|
|
5
5
|
import { NgTemplateOutlet, NgComponentOutlet, Location, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
|
|
6
6
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
7
7
|
import { format, startOfWeek, startOfDay, endOfWeek, isBefore, addDays, endOfMonth, startOfMonth, isSameYear, isSameMonth, isSameDay, startOfYear, isAfter, addYears, addMonths, setMonth, setYear, getDate, setDate, lastDayOfMonth, getWeek, endOfYear, parse, isValid, setSeconds, setMinutes, setHours, setMilliseconds, endOfDay, eachDayOfInterval, differenceInCalendarDays, addMinutes, differenceInMinutes, addHours } from 'date-fns';
|
|
8
8
|
import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
|
|
9
|
-
import { Subject, take, tap, timer, takeUntil, fromEvent, filter, switchMap, map, combineLatest, distinctUntilChanged, EMPTY, debounceTime, merge, defer, finalize, of, isObservable, from, catchError, firstValueFrom, concat, scan, interval, animationFrameScheduler, EmptyError, exhaustMap, Observable, shareReplay, defaultIfEmpty, expand, toArray, takeWhile, mergeMap } from 'rxjs';
|
|
9
|
+
import { Subject, take, tap, timer, takeUntil, fromEvent, filter, switchMap, map, combineLatest, distinctUntilChanged, EMPTY, debounceTime, merge, defer, finalize, of, isObservable, from, catchError, firstValueFrom, concat, scan, interval, animationFrameScheduler, EmptyError, share, exhaustMap, Observable, shareReplay, defaultIfEmpty, expand, toArray, takeWhile, mergeMap } from 'rxjs';
|
|
10
10
|
import * as i1$1 from '@angular/router';
|
|
11
11
|
import { Router, RouterLink, ActivatedRoute, RouterLinkActive, NavigationEnd } from '@angular/router';
|
|
12
12
|
import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, executeUntilSettled, extractQuery, queryComputed, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, createQueryErrorResponse } from '@ethlete/query';
|
|
@@ -15926,9 +15926,9 @@ class ScrollableDirective {
|
|
|
15926
15926
|
constructor() {
|
|
15927
15927
|
this.hostElement = injectHostElement();
|
|
15928
15928
|
// --- Inputs ---
|
|
15929
|
-
this.itemSize = input('auto', { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform() });
|
|
15930
|
-
this.direction = input('horizontal', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform() });
|
|
15931
|
-
this.scrollMode = input('container', { ...(ngDevMode ? { debugName: "scrollMode" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform() });
|
|
15929
|
+
this.itemSize = input('auto', { ...(ngDevMode ? { debugName: "itemSize" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform('auto') });
|
|
15930
|
+
this.direction = input('horizontal', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform('horizontal') });
|
|
15931
|
+
this.scrollMode = input('container', { ...(ngDevMode ? { debugName: "scrollMode" } : /* istanbul ignore next */ {}), transform: typedBreakpointTransform('container') });
|
|
15932
15932
|
this.scrollOrigin = input('auto', /* @ts-ignore */
|
|
15933
15933
|
...(ngDevMode ? [{ debugName: "scrollOrigin" }] : /* istanbul ignore next */ []));
|
|
15934
15934
|
this.scrollMargin = input(0, { ...(ngDevMode ? { debugName: "scrollMargin" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
@@ -19866,7 +19866,7 @@ const createFilterOverlay = (config) => {
|
|
|
19866
19866
|
optional: true,
|
|
19867
19867
|
});
|
|
19868
19868
|
const labels = injectFilterOverlayLabels();
|
|
19869
|
-
const draft = config.queryForm.branch();
|
|
19869
|
+
const draft = config.queryForm.branch(inject(Injector));
|
|
19870
19870
|
const maxCountedHits = config.maxCountedHits ?? 250;
|
|
19871
19871
|
// Called here, inside the overlay's injection context, which is why `preview` is a factory: a query created at
|
|
19872
19872
|
// config time would belong to the page and outlive the overlay.
|
|
@@ -51928,13 +51928,13 @@ class MasonryDirective {
|
|
|
51928
51928
|
* Accepts a per-breakpoint map (`{ xs: 150, md: 240 }`) for a layout that wants coarser columns on a phone
|
|
51929
51929
|
* than the container width alone would give. @default 250
|
|
51930
51930
|
*/
|
|
51931
|
-
this.columnWidth = input(250, { ...(ngDevMode ? { debugName: "columnWidth" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform() });
|
|
51931
|
+
this.columnWidth = input(250, { ...(ngDevMode ? { debugName: "columnWidth" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform(250) });
|
|
51932
51932
|
/**
|
|
51933
51933
|
* The space between columns and between stacked items, in px. Also accepts a per-breakpoint map. It is a
|
|
51934
51934
|
* number rather than CSS `gap` because the items are positioned, not laid out - CSS never sees the
|
|
51935
51935
|
* columns. @default 16
|
|
51936
51936
|
*/
|
|
51937
|
-
this.gap = input(16, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform() });
|
|
51937
|
+
this.gap = input(16, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberBreakpointTransform(16) });
|
|
51938
51938
|
this.dimensions = signalHostElementDimensions();
|
|
51939
51939
|
this.registeredItems = signal([], /* @ts-ignore */
|
|
51940
51940
|
...(ngDevMode ? [{ debugName: "registeredItems" }] : /* istanbul ignore next */ []));
|
|
@@ -52909,12 +52909,13 @@ class NotificationComponent {
|
|
|
52909
52909
|
...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
|
|
52910
52910
|
this.resolvedSurface = computed(() => {
|
|
52911
52911
|
const themes = this.surfaceThemes;
|
|
52912
|
-
|
|
52912
|
+
const type = this.surfaceType();
|
|
52913
|
+
if (!themes || !type)
|
|
52913
52914
|
return null;
|
|
52914
52915
|
// The stack is appended to <body> and paints above every overlay, so a toast is a layer on the
|
|
52915
52916
|
// page - elevation 1, the same level a dialog resolves to. It must not follow what is open
|
|
52916
52917
|
// underneath it: that re-shaded every visible toast whenever an overlay came or went.
|
|
52917
|
-
return resolveSurfaceByElevation(themes,
|
|
52918
|
+
return resolveSurfaceByElevation(themes, type, 1);
|
|
52918
52919
|
}, /* @ts-ignore */
|
|
52919
52920
|
...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
|
|
52920
52921
|
this.controlsColor = computed(() => {
|
|
@@ -57121,6 +57122,399 @@ const SCHEDULER_IMPORTS = [
|
|
|
57121
57122
|
SchedulerAppointmentDragDirective,
|
|
57122
57123
|
];
|
|
57123
57124
|
|
|
57125
|
+
// codes 4900-4999
|
|
57126
|
+
const SCROLLBAR_ERROR_CODES = {
|
|
57127
|
+
/** `for` was bound to something that is not an element - a component instance, most often. */
|
|
57128
|
+
INVALID_TARGET: 4900,
|
|
57129
|
+
/** The scrollbar rendered with nothing marked `etScrollbarThumb`, so it has nothing to move. */
|
|
57130
|
+
MISSING_THUMB: 4901,
|
|
57131
|
+
/** The scrollbar rendered with no `for`, so there is no scroll container for it to mirror. */
|
|
57132
|
+
MISSING_TARGET: 4902,
|
|
57133
|
+
};
|
|
57134
|
+
|
|
57135
|
+
const NO_SCROLLBAR_GEOMETRY = {
|
|
57136
|
+
canScroll: false,
|
|
57137
|
+
thumbSize: 0,
|
|
57138
|
+
thumbOffset: 0,
|
|
57139
|
+
progress: 0,
|
|
57140
|
+
};
|
|
57141
|
+
const readScrollMetrics = (target, orientation) => {
|
|
57142
|
+
const isHorizontal = orientation === 'horizontal';
|
|
57143
|
+
const viewportSize = isHorizontal ? target.clientWidth : target.clientHeight;
|
|
57144
|
+
const contentSize = isHorizontal ? target.scrollWidth : target.scrollHeight;
|
|
57145
|
+
return { viewportSize, contentSize, maxScroll: Math.max(0, contentSize - viewportSize) };
|
|
57146
|
+
};
|
|
57147
|
+
/**
|
|
57148
|
+
* How far the target is scrolled from the start edge, which is the right edge in a right-to-left
|
|
57149
|
+
* container. `scrollLeft` counts down from 0 into negative numbers there, so the sign carries the
|
|
57150
|
+
* direction and only the magnitude is a distance. Read it directly and every right-to-left thumb
|
|
57151
|
+
* sits at the start.
|
|
57152
|
+
*/
|
|
57153
|
+
const readScrollDistance = (target, orientation) => orientation === 'horizontal' ? Math.abs(target.scrollLeft) : target.scrollTop;
|
|
57154
|
+
const scrollToDistance = (options) => {
|
|
57155
|
+
const { target, orientation, distance, isRtl, behavior } = options;
|
|
57156
|
+
if (orientation === 'horizontal') {
|
|
57157
|
+
target.scroll({ left: isRtl ? -distance : distance, behavior });
|
|
57158
|
+
}
|
|
57159
|
+
else {
|
|
57160
|
+
target.scroll({ top: distance, behavior });
|
|
57161
|
+
}
|
|
57162
|
+
};
|
|
57163
|
+
const measureScrollbar = (options) => {
|
|
57164
|
+
const { target, orientation, trackSize, minThumbSize } = options;
|
|
57165
|
+
const { viewportSize, contentSize, maxScroll } = readScrollMetrics(target, orientation);
|
|
57166
|
+
if (maxScroll <= 0 || trackSize <= 0)
|
|
57167
|
+
return NO_SCROLLBAR_GEOMETRY;
|
|
57168
|
+
const thumbSize = clamp$1(trackSize * (viewportSize / contentSize), Math.min(minThumbSize, trackSize), trackSize);
|
|
57169
|
+
const progress = clamp$1(readScrollDistance(target, orientation) / maxScroll, 0, 1);
|
|
57170
|
+
return { canScroll: true, thumbSize, thumbOffset: (trackSize - thumbSize) * progress, progress };
|
|
57171
|
+
};
|
|
57172
|
+
|
|
57173
|
+
const SCROLLBAR_HOST_CLASS = 'et-scrollbar-host';
|
|
57174
|
+
const hostReferences = /* @__PURE__ */ new WeakMap();
|
|
57175
|
+
/**
|
|
57176
|
+
* Mark a scroll container as owned by a custom scrollbar and return the release function.
|
|
57177
|
+
*
|
|
57178
|
+
* Ref-counted, because one container carries a scrollbar per axis and the first of the two to be
|
|
57179
|
+
* destroyed must not un-mark a container the other still mirrors.
|
|
57180
|
+
*/
|
|
57181
|
+
const markScrollbarHost = (renderer, target) => {
|
|
57182
|
+
hostReferences.set(target, (hostReferences.get(target) ?? 0) + 1);
|
|
57183
|
+
renderer.addClass(target, SCROLLBAR_HOST_CLASS);
|
|
57184
|
+
return () => {
|
|
57185
|
+
const remaining = (hostReferences.get(target) ?? 1) - 1;
|
|
57186
|
+
if (remaining > 0) {
|
|
57187
|
+
hostReferences.set(target, remaining);
|
|
57188
|
+
return;
|
|
57189
|
+
}
|
|
57190
|
+
hostReferences.delete(target);
|
|
57191
|
+
renderer.removeClass(target, SCROLLBAR_HOST_CLASS);
|
|
57192
|
+
};
|
|
57193
|
+
};
|
|
57194
|
+
|
|
57195
|
+
const AUTO_HIDE_DELAY = 800;
|
|
57196
|
+
const ELEMENT_NODE_TYPE = 1;
|
|
57197
|
+
/**
|
|
57198
|
+
* Mirrors one axis of a scroll container as a thumb the pointer can drag.
|
|
57199
|
+
*
|
|
57200
|
+
* The container keeps the scrolling. This directive never moves content itself - it reads the
|
|
57201
|
+
* container's scroll offset and content size, and writes an offset back when the thumb is dragged or
|
|
57202
|
+
* the track is pressed. Wheel, touch, keyboard and programmatic scrolling stay native, so a container
|
|
57203
|
+
* behaves the same whether or not a scrollbar mirrors it.
|
|
57204
|
+
*
|
|
57205
|
+
* One instance covers one axis. Apply two, with `orientation` set on each, for a container that
|
|
57206
|
+
* scrolls both ways.
|
|
57207
|
+
*
|
|
57208
|
+
* The target gets the `et-scrollbar-host` class, which hides its native scrollbar. The rule ships with
|
|
57209
|
+
* {@link ScrollbarComponent} - a headless consumer has to declare it.
|
|
57210
|
+
*
|
|
57211
|
+
* @example
|
|
57212
|
+
* <div class="list" #list>…</div>
|
|
57213
|
+
* <div etScrollbar [for]="list" orientation="vertical">
|
|
57214
|
+
* <div etScrollbarThumb></div>
|
|
57215
|
+
* </div>
|
|
57216
|
+
*/
|
|
57217
|
+
class ScrollbarDirective {
|
|
57218
|
+
constructor() {
|
|
57219
|
+
this.hostElement = injectHostElement();
|
|
57220
|
+
this.destroyRef = inject(DestroyRef);
|
|
57221
|
+
this.renderer = injectRenderer();
|
|
57222
|
+
/** The scroll container to mirror. */
|
|
57223
|
+
this.target = input(null, { ...(ngDevMode ? { debugName: "target" } : /* istanbul ignore next */ {}), alias: 'for' });
|
|
57224
|
+
/** Which axis of the target this scrollbar mirrors. */
|
|
57225
|
+
this.orientation = input('vertical', /* @ts-ignore */
|
|
57226
|
+
...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
57227
|
+
/** Show the thumb only while the target scrolls, while the pointer is over it, and while the thumb is dragged. */
|
|
57228
|
+
this.autoHide = input(false, { ...(ngDevMode ? { debugName: "autoHide" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
57229
|
+
/** Shortest the thumb may get on a long track, in pixels. */
|
|
57230
|
+
this.minThumbSize = input(24, { ...(ngDevMode ? { debugName: "minThumbSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
57231
|
+
/** Hide the thumb and ignore the pointer. */
|
|
57232
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
57233
|
+
this.targetElement = computed(() => {
|
|
57234
|
+
const value = this.target();
|
|
57235
|
+
const element = value instanceof ElementRef ? value.nativeElement : value;
|
|
57236
|
+
if (!element || typeof element !== 'object')
|
|
57237
|
+
return null;
|
|
57238
|
+
return element.nodeType === ELEMENT_NODE_TYPE ? element : null;
|
|
57239
|
+
}, /* @ts-ignore */
|
|
57240
|
+
...(ngDevMode ? [{ debugName: "targetElement" }] : /* istanbul ignore next */ []));
|
|
57241
|
+
this.targetScroll$ = toObservable(this.targetElement).pipe(
|
|
57242
|
+
// The repo's scroll-state helpers answer "does it overflow?" and re-measure on a resize. This needs
|
|
57243
|
+
// the offset itself, on every frame the target moves, which only the event carries.
|
|
57244
|
+
// eslint-disable-next-line ethlete/prefer-scroll-state
|
|
57245
|
+
switchMap((element) => (element ? fromEvent(element, 'scroll', { passive: true }) : EMPTY)), share());
|
|
57246
|
+
// A scroll event does not change the target's size, so the scroll state stays cached through it. The
|
|
57247
|
+
// geometry has to re-read the offset anyway, and this is what tells it to.
|
|
57248
|
+
this.scrollTick = toSignal(this.targetScroll$.pipe(scan((tick) => tick + 1, 0)), { initialValue: 0 });
|
|
57249
|
+
this.targetScrollState = signalElementScrollState(this.targetElement, {
|
|
57250
|
+
mutations: { childList: true, subtree: true, attributeFilter: ['class', 'hidden'] },
|
|
57251
|
+
});
|
|
57252
|
+
this.trackDimensions = signalElementDimensions(this.hostElement);
|
|
57253
|
+
this.trackSize = computed(() => {
|
|
57254
|
+
const client = this.trackDimensions().client;
|
|
57255
|
+
if (!client)
|
|
57256
|
+
return 0;
|
|
57257
|
+
return this.orientation() === 'horizontal' ? client.width : client.height;
|
|
57258
|
+
}, /* @ts-ignore */
|
|
57259
|
+
...(ngDevMode ? [{ debugName: "trackSize" }] : /* istanbul ignore next */ []));
|
|
57260
|
+
/** Whether the target lays its inline axis out right to left. Always `false` for a vertical scrollbar. */
|
|
57261
|
+
this.isRtl = computed(() => {
|
|
57262
|
+
const target = this.targetElement();
|
|
57263
|
+
this.targetScrollState();
|
|
57264
|
+
if (!target || this.orientation() !== 'horizontal')
|
|
57265
|
+
return false;
|
|
57266
|
+
return getComputedStyle(target).direction === 'rtl';
|
|
57267
|
+
}, /* @ts-ignore */
|
|
57268
|
+
...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
|
|
57269
|
+
/** Where the thumb sits right now. */
|
|
57270
|
+
this.geometry = computed(() => {
|
|
57271
|
+
this.scrollTick();
|
|
57272
|
+
this.targetScrollState();
|
|
57273
|
+
const target = this.targetElement();
|
|
57274
|
+
if (!target || this.disabled())
|
|
57275
|
+
return NO_SCROLLBAR_GEOMETRY;
|
|
57276
|
+
return measureScrollbar({
|
|
57277
|
+
target,
|
|
57278
|
+
orientation: this.orientation(),
|
|
57279
|
+
trackSize: this.trackSize(),
|
|
57280
|
+
minThumbSize: this.minThumbSize(),
|
|
57281
|
+
});
|
|
57282
|
+
}, /* @ts-ignore */
|
|
57283
|
+
...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
|
|
57284
|
+
this.canScroll = computed(() => this.geometry().canScroll, /* @ts-ignore */
|
|
57285
|
+
...(ngDevMode ? [{ debugName: "canScroll" }] : /* istanbul ignore next */ []));
|
|
57286
|
+
this.isScrolling = toSignal(this.targetScroll$.pipe(switchMap(() => concat(of(true), timer(AUTO_HIDE_DELAY).pipe(map(() => false))))), { initialValue: false });
|
|
57287
|
+
this.isPointerOverTarget = toSignal(toObservable(this.targetElement).pipe(switchMap((element) => element
|
|
57288
|
+
? merge(fromEvent(element, 'pointerenter').pipe(map(() => true)), fromEvent(element, 'pointerleave').pipe(map(() => false)))
|
|
57289
|
+
: of(false))), { initialValue: false });
|
|
57290
|
+
this.isPointerOverSelf = signal(false, /* @ts-ignore */
|
|
57291
|
+
...(ngDevMode ? [{ debugName: "isPointerOverSelf" }] : /* istanbul ignore next */ []));
|
|
57292
|
+
/** Whether the thumb is being dragged right now. */
|
|
57293
|
+
this.isDragging = signal(false, /* @ts-ignore */
|
|
57294
|
+
...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
|
|
57295
|
+
this.isVisible = computed(() => {
|
|
57296
|
+
if (!this.canScroll())
|
|
57297
|
+
return false;
|
|
57298
|
+
if (!this.autoHide())
|
|
57299
|
+
return true;
|
|
57300
|
+
return this.isScrolling() || this.isPointerOverTarget() || this.isPointerOverSelf() || this.isDragging();
|
|
57301
|
+
}, /* @ts-ignore */
|
|
57302
|
+
...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
|
|
57303
|
+
/**
|
|
57304
|
+
* The element that moves along the track. Set by `etScrollbarThumb`.
|
|
57305
|
+
*
|
|
57306
|
+
* @internal
|
|
57307
|
+
*/
|
|
57308
|
+
this.thumbElement = signal(null, /* @ts-ignore */
|
|
57309
|
+
...(ngDevMode ? [{ debugName: "thumbElement" }] : /* istanbul ignore next */ []));
|
|
57310
|
+
/** @internal */
|
|
57311
|
+
this.hostAttributeBindings = signalHostAttributes({
|
|
57312
|
+
'data-orientation': this.orientation,
|
|
57313
|
+
'data-direction': computed(() => (this.isRtl() ? 'rtl' : null)),
|
|
57314
|
+
});
|
|
57315
|
+
/** @internal */
|
|
57316
|
+
this.hostClassBindings = signalHostClasses({
|
|
57317
|
+
'et-scrollbar--visible': this.isVisible,
|
|
57318
|
+
'et-scrollbar--dragging': this.isDragging,
|
|
57319
|
+
});
|
|
57320
|
+
/** @internal */
|
|
57321
|
+
this.hostStyleBindings = signalHostStyles({
|
|
57322
|
+
'--_et-scrollbar-thumb-size': computed(() => `${this.geometry().thumbSize}px`),
|
|
57323
|
+
'--_et-scrollbar-thumb-offset': computed(() => `${this.geometry().thumbOffset}px`),
|
|
57324
|
+
});
|
|
57325
|
+
effect((onCleanup) => {
|
|
57326
|
+
const target = this.targetElement();
|
|
57327
|
+
if (!target)
|
|
57328
|
+
return;
|
|
57329
|
+
onCleanup(markScrollbarHost(this.renderer, target));
|
|
57330
|
+
});
|
|
57331
|
+
applyHostListeners({
|
|
57332
|
+
pointerenter: () => this.isPointerOverSelf.set(true),
|
|
57333
|
+
pointerleave: () => this.isPointerOverSelf.set(false),
|
|
57334
|
+
pointerdown: (event) => this.pageTowardsPointer(event),
|
|
57335
|
+
});
|
|
57336
|
+
if (ngDevMode) {
|
|
57337
|
+
effect(() => {
|
|
57338
|
+
const value = this.target();
|
|
57339
|
+
if (value === null || value === undefined || this.targetElement())
|
|
57340
|
+
return;
|
|
57341
|
+
throw new RuntimeError(SCROLLBAR_ERROR_CODES.INVALID_TARGET, '[ScrollbarDirective] `for` must be an element or an ElementRef. ' +
|
|
57342
|
+
'A template reference variable on a component gives the component instance - read its element instead.', { value });
|
|
57343
|
+
});
|
|
57344
|
+
afterNextRender(() => {
|
|
57345
|
+
if (!this.thumbElement()) {
|
|
57346
|
+
throw new RuntimeError(SCROLLBAR_ERROR_CODES.MISSING_THUMB, '[ScrollbarDirective] No thumb registered. Put `etScrollbarThumb` on the element that moves.', { element: this.hostElement });
|
|
57347
|
+
}
|
|
57348
|
+
if (this.target() === null || this.target() === undefined) {
|
|
57349
|
+
throw new RuntimeError(SCROLLBAR_ERROR_CODES.MISSING_TARGET, '[ScrollbarDirective] No scroll container to mirror. Bind `for` to the element that scrolls.', { element: this.hostElement });
|
|
57350
|
+
}
|
|
57351
|
+
});
|
|
57352
|
+
}
|
|
57353
|
+
}
|
|
57354
|
+
/**
|
|
57355
|
+
* Drag the target's scroll offset with the pointer. Call from a `pointerdown` on the thumb -
|
|
57356
|
+
* `etScrollbarThumb` already does.
|
|
57357
|
+
*
|
|
57358
|
+
* @internal
|
|
57359
|
+
*/
|
|
57360
|
+
startThumbDrag(event) {
|
|
57361
|
+
if (event.button !== 0 || this.disabled())
|
|
57362
|
+
return;
|
|
57363
|
+
event.stopPropagation();
|
|
57364
|
+
const target = this.targetElement();
|
|
57365
|
+
const thumb = this.thumbElement();
|
|
57366
|
+
if (!target || !thumb)
|
|
57367
|
+
return;
|
|
57368
|
+
const orientation = this.orientation();
|
|
57369
|
+
const isRtl = this.isRtl();
|
|
57370
|
+
const { maxScroll } = readScrollMetrics(target, orientation);
|
|
57371
|
+
const maxThumbOffset = this.trackSize() - this.geometry().thumbSize;
|
|
57372
|
+
if (maxScroll <= 0 || maxThumbOffset <= 0)
|
|
57373
|
+
return;
|
|
57374
|
+
const startDistance = readScrollDistance(target, orientation);
|
|
57375
|
+
const scrollTo = (distance) => scrollToDistance({ target, orientation, distance, isRtl, behavior: 'instant' });
|
|
57376
|
+
dragGestureFrom(event, thumb, { commitThreshold: 0 })
|
|
57377
|
+
.pipe(tap((gesture) => {
|
|
57378
|
+
switch (gesture.type) {
|
|
57379
|
+
case 'start':
|
|
57380
|
+
this.isDragging.set(true);
|
|
57381
|
+
break;
|
|
57382
|
+
case 'move': {
|
|
57383
|
+
const physicalDelta = orientation === 'horizontal' ? gesture.data.totalDx : gesture.data.totalDy;
|
|
57384
|
+
const logicalDelta = isRtl ? -physicalDelta : physicalDelta;
|
|
57385
|
+
scrollTo(clamp$1(startDistance + (logicalDelta / maxThumbOffset) * maxScroll, 0, maxScroll));
|
|
57386
|
+
break;
|
|
57387
|
+
}
|
|
57388
|
+
// The user never let go, so the offset they were heading for is not one they chose.
|
|
57389
|
+
case 'cancelled':
|
|
57390
|
+
scrollTo(startDistance);
|
|
57391
|
+
this.isDragging.set(false);
|
|
57392
|
+
break;
|
|
57393
|
+
default:
|
|
57394
|
+
this.isDragging.set(false);
|
|
57395
|
+
break;
|
|
57396
|
+
}
|
|
57397
|
+
}), takeUntilDestroyed(this.destroyRef))
|
|
57398
|
+
.subscribe();
|
|
57399
|
+
}
|
|
57400
|
+
/**
|
|
57401
|
+
* Scroll the target one viewport towards a press on the track, the way a press beside a native thumb
|
|
57402
|
+
* pages. Ignores presses on the thumb, which start a drag instead.
|
|
57403
|
+
*/
|
|
57404
|
+
pageTowardsPointer(event) {
|
|
57405
|
+
if (event.button !== 0 || this.disabled())
|
|
57406
|
+
return;
|
|
57407
|
+
const target = this.targetElement();
|
|
57408
|
+
const geometry = this.geometry();
|
|
57409
|
+
if (!target || !geometry.canScroll)
|
|
57410
|
+
return;
|
|
57411
|
+
const orientation = this.orientation();
|
|
57412
|
+
const isHorizontal = orientation === 'horizontal';
|
|
57413
|
+
const isRtl = this.isRtl();
|
|
57414
|
+
const { viewportSize, maxScroll } = readScrollMetrics(target, orientation);
|
|
57415
|
+
const trackRect = this.hostElement.getBoundingClientRect();
|
|
57416
|
+
const physicalOffset = isHorizontal ? event.clientX - trackRect.left : event.clientY - trackRect.top;
|
|
57417
|
+
const logicalOffset = isRtl ? trackRect.width - physicalOffset : physicalOffset;
|
|
57418
|
+
const step = logicalOffset < geometry.thumbOffset ? -viewportSize : viewportSize;
|
|
57419
|
+
scrollToDistance({
|
|
57420
|
+
target,
|
|
57421
|
+
orientation,
|
|
57422
|
+
distance: clamp$1(readScrollDistance(target, orientation) + step, 0, maxScroll),
|
|
57423
|
+
isRtl,
|
|
57424
|
+
behavior: 'smooth',
|
|
57425
|
+
});
|
|
57426
|
+
}
|
|
57427
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
57428
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: ScrollbarDirective, isStandalone: true, selector: "[etScrollbar]", inputs: { target: { classPropertyName: "target", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, minThumbSize: { classPropertyName: "minThumbSize", publicName: "minThumbSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-scrollbar" }, exportAs: ["etScrollbar"], ngImport: i0 }); }
|
|
57429
|
+
}
|
|
57430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollbarDirective, decorators: [{
|
|
57431
|
+
type: Directive,
|
|
57432
|
+
args: [{
|
|
57433
|
+
selector: '[etScrollbar]',
|
|
57434
|
+
exportAs: 'etScrollbar',
|
|
57435
|
+
host: {
|
|
57436
|
+
class: 'et-scrollbar',
|
|
57437
|
+
},
|
|
57438
|
+
}]
|
|
57439
|
+
}], ctorParameters: () => [], propDecorators: { target: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], minThumbSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minThumbSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
57440
|
+
|
|
57441
|
+
/**
|
|
57442
|
+
* The part of a scrollbar that moves. Sizes and offsets itself from the scrollbar's geometry, and
|
|
57443
|
+
* starts a drag when it is pressed.
|
|
57444
|
+
*
|
|
57445
|
+
* @example
|
|
57446
|
+
* <div etScrollbar [for]="list">
|
|
57447
|
+
* <div etScrollbarThumb></div>
|
|
57448
|
+
* </div>
|
|
57449
|
+
*/
|
|
57450
|
+
class ScrollbarThumbDirective {
|
|
57451
|
+
constructor() {
|
|
57452
|
+
this.scrollbar = inject(ScrollbarDirective);
|
|
57453
|
+
this.hostElement = injectHostElement();
|
|
57454
|
+
this.scrollbar.thumbElement.set(this.hostElement);
|
|
57455
|
+
inject(DestroyRef).onDestroy(() => {
|
|
57456
|
+
if (this.scrollbar.thumbElement() !== this.hostElement)
|
|
57457
|
+
return;
|
|
57458
|
+
this.scrollbar.thumbElement.set(null);
|
|
57459
|
+
});
|
|
57460
|
+
applyHostListener('pointerdown', (event) => this.scrollbar.startThumbDrag(event));
|
|
57461
|
+
}
|
|
57462
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollbarThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
57463
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: ScrollbarThumbDirective, isStandalone: true, selector: "[etScrollbarThumb]", host: { classAttribute: "et-scrollbar-thumb" }, ngImport: i0 }); }
|
|
57464
|
+
}
|
|
57465
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollbarThumbDirective, decorators: [{
|
|
57466
|
+
type: Directive,
|
|
57467
|
+
args: [{
|
|
57468
|
+
selector: '[etScrollbarThumb]',
|
|
57469
|
+
host: {
|
|
57470
|
+
class: 'et-scrollbar-thumb',
|
|
57471
|
+
},
|
|
57472
|
+
}]
|
|
57473
|
+
}], ctorParameters: () => [] });
|
|
57474
|
+
|
|
57475
|
+
/**
|
|
57476
|
+
* A scrollbar for a container whose native one is in the way - a panel with its own chrome, a track
|
|
57477
|
+
* that has to look the same on every platform, a surface a light-grey system bar clashes with.
|
|
57478
|
+
*
|
|
57479
|
+
* The container keeps the scrolling. This only mirrors it, so wheel, touch, keyboard and programmatic
|
|
57480
|
+
* scrolling behave exactly as they did. Point it at the container with `for` and it hides that
|
|
57481
|
+
* container's native scrollbar for you.
|
|
57482
|
+
*
|
|
57483
|
+
* It positions itself over the end edge of its containing block, so give the element that wraps the
|
|
57484
|
+
* scroll container `position: relative`. One element covers one axis - add a second with
|
|
57485
|
+
* `orientation="horizontal"` for a container that scrolls both ways.
|
|
57486
|
+
*
|
|
57487
|
+
* @example
|
|
57488
|
+
* <div class="relative">
|
|
57489
|
+
* <div #list class="list">…</div>
|
|
57490
|
+
* <et-scrollbar [for]="list" autoHide />
|
|
57491
|
+
* </div>
|
|
57492
|
+
*/
|
|
57493
|
+
class ScrollbarComponent {
|
|
57494
|
+
constructor() {
|
|
57495
|
+
this.scrollbarDir = inject(ScrollbarDirective);
|
|
57496
|
+
}
|
|
57497
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ScrollbarComponent, isStandalone: true, selector: "et-scrollbar", host: { classAttribute: "et-scrollbar" }, hostDirectives: [{ directive: ScrollbarDirective, inputs: ["for", "for", "orientation", "orientation", "autoHide", "autoHide", "minThumbSize", "minThumbSize", "disabled", "disabled"] }], ngImport: i0, template: `<div etScrollbarThumb></div>`, isInline: true, styles: ["@layer components{@property --et-scrollbar-thickness{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-scrollbar-thumb-thickness{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-scrollbar-thumb-radius{syntax: \"<length-percentage>\"; inherits: true; initial-value: 999px;}@property --et-scrollbar-fade-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}.et-scrollbar-host{scrollbar-width:none}.et-scrollbar-host::-webkit-scrollbar{display:none}.et-scrollbar{position:absolute;z-index:1;opacity:0;transition:opacity var(--et-scrollbar-fade-duration) ease;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}.et-scrollbar:where([data-direction=rtl]){direction:rtl}.et-scrollbar:where([data-orientation=vertical]){inset-block:0;inset-inline-end:0;inline-size:var(--et-scrollbar-thickness)}.et-scrollbar:where([data-orientation=horizontal]){inset-inline:0;inset-block-end:0;block-size:var(--et-scrollbar-thickness)}.et-scrollbar:where(.et-scrollbar--visible){opacity:1;pointer-events:auto}.et-scrollbar .et-scrollbar-thumb{position:absolute;transition:background-color var(--et-scrollbar-fade-duration) ease;border-radius:var(--et-scrollbar-thumb-radius);background-color:var( --et-scrollbar-thumb-color, color-mix(in srgb, var(--et-surface-interaction-solid, gray) 35%, transparent) )}.et-scrollbar:where([data-orientation=vertical]) .et-scrollbar-thumb{inset-block-start:var(--_et-scrollbar-thumb-offset, 0px);inset-inline:0;block-size:var(--_et-scrollbar-thumb-size, 0px);inline-size:var(--et-scrollbar-thumb-thickness);margin-inline:auto}.et-scrollbar:where([data-orientation=horizontal]) .et-scrollbar-thumb{inset-block:0;inset-inline-start:var(--_et-scrollbar-thumb-offset, 0px);block-size:var(--et-scrollbar-thumb-thickness);inline-size:var(--_et-scrollbar-thumb-size, 0px);margin-block:auto}.et-scrollbar .et-scrollbar-thumb:hover,.et-scrollbar.et-scrollbar--dragging .et-scrollbar-thumb{background-color:var( --et-scrollbar-thumb-active-color, color-mix(in srgb, var(--et-surface-interaction-solid, gray) 60%, transparent) )}@media(prefers-reduced-motion:reduce){.et-scrollbar,.et-scrollbar .et-scrollbar-thumb{transition:none}}}\n"], dependencies: [{ kind: "directive", type: ScrollbarThumbDirective, selector: "[etScrollbarThumb]" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
57499
|
+
}
|
|
57500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ScrollbarComponent, decorators: [{
|
|
57501
|
+
type: Component,
|
|
57502
|
+
args: [{ selector: 'et-scrollbar', template: `<div etScrollbarThumb></div>`, encapsulation: ViewEncapsulation.None, imports: [ScrollbarThumbDirective], hostDirectives: [
|
|
57503
|
+
{
|
|
57504
|
+
directive: ScrollbarDirective,
|
|
57505
|
+
inputs: ['for', 'orientation', 'autoHide', 'minThumbSize', 'disabled'],
|
|
57506
|
+
},
|
|
57507
|
+
], host: {
|
|
57508
|
+
class: 'et-scrollbar',
|
|
57509
|
+
}, styles: ["@layer components{@property --et-scrollbar-thickness{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-scrollbar-thumb-thickness{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-scrollbar-thumb-radius{syntax: \"<length-percentage>\"; inherits: true; initial-value: 999px;}@property --et-scrollbar-fade-duration{syntax: \"<time>\"; inherits: true; initial-value: .15s;}.et-scrollbar-host{scrollbar-width:none}.et-scrollbar-host::-webkit-scrollbar{display:none}.et-scrollbar{position:absolute;z-index:1;opacity:0;transition:opacity var(--et-scrollbar-fade-duration) ease;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}.et-scrollbar:where([data-direction=rtl]){direction:rtl}.et-scrollbar:where([data-orientation=vertical]){inset-block:0;inset-inline-end:0;inline-size:var(--et-scrollbar-thickness)}.et-scrollbar:where([data-orientation=horizontal]){inset-inline:0;inset-block-end:0;block-size:var(--et-scrollbar-thickness)}.et-scrollbar:where(.et-scrollbar--visible){opacity:1;pointer-events:auto}.et-scrollbar .et-scrollbar-thumb{position:absolute;transition:background-color var(--et-scrollbar-fade-duration) ease;border-radius:var(--et-scrollbar-thumb-radius);background-color:var( --et-scrollbar-thumb-color, color-mix(in srgb, var(--et-surface-interaction-solid, gray) 35%, transparent) )}.et-scrollbar:where([data-orientation=vertical]) .et-scrollbar-thumb{inset-block-start:var(--_et-scrollbar-thumb-offset, 0px);inset-inline:0;block-size:var(--_et-scrollbar-thumb-size, 0px);inline-size:var(--et-scrollbar-thumb-thickness);margin-inline:auto}.et-scrollbar:where([data-orientation=horizontal]) .et-scrollbar-thumb{inset-block:0;inset-inline-start:var(--_et-scrollbar-thumb-offset, 0px);block-size:var(--et-scrollbar-thumb-thickness);inline-size:var(--_et-scrollbar-thumb-size, 0px);margin-block:auto}.et-scrollbar .et-scrollbar-thumb:hover,.et-scrollbar.et-scrollbar--dragging .et-scrollbar-thumb{background-color:var( --et-scrollbar-thumb-active-color, color-mix(in srgb, var(--et-surface-interaction-solid, gray) 60%, transparent) )}@media(prefers-reduced-motion:reduce){.et-scrollbar,.et-scrollbar .et-scrollbar-thumb{transition:none}}}\n"] }]
|
|
57510
|
+
}] });
|
|
57511
|
+
|
|
57512
|
+
/**
|
|
57513
|
+
* The scrollbar element. `etScrollbar` and `etScrollbarThumb` come with it for a consumer that
|
|
57514
|
+
* builds its own track instead of using `<et-scrollbar>`.
|
|
57515
|
+
*/
|
|
57516
|
+
const SCROLLBAR_IMPORTS = [ScrollbarComponent, ScrollbarDirective, ScrollbarThumbDirective];
|
|
57517
|
+
|
|
57124
57518
|
/** The built-in English labels. */
|
|
57125
57519
|
const DEFAULT_STANDINGS_LABELS = {
|
|
57126
57520
|
caption: 'Standings',
|
|
@@ -57439,9 +57833,9 @@ class StreamConsentComponent {
|
|
|
57439
57833
|
this.HEADING_ID = `et-stream-consent-heading-${nextHeadingId++}`;
|
|
57440
57834
|
this.cardSurface = computed(() => {
|
|
57441
57835
|
const themes = this.surfaceThemes;
|
|
57442
|
-
if (!themes)
|
|
57443
|
-
return null;
|
|
57444
57836
|
const type = this.surfaceType();
|
|
57837
|
+
if (!themes || !type)
|
|
57838
|
+
return null;
|
|
57445
57839
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
57446
57840
|
return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
|
|
57447
57841
|
}, /* @ts-ignore */
|
|
@@ -57521,9 +57915,9 @@ class StreamPlayerErrorComponent {
|
|
|
57521
57915
|
this.surfaceThemes = injectSurfaceThemes({ optional: true });
|
|
57522
57916
|
this.cardSurface = computed(() => {
|
|
57523
57917
|
const themes = this.surfaceThemes;
|
|
57524
|
-
if (!themes)
|
|
57525
|
-
return null;
|
|
57526
57918
|
const type = this.surfaceType();
|
|
57919
|
+
if (!themes || !type)
|
|
57920
|
+
return null;
|
|
57527
57921
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
57528
57922
|
return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
|
|
57529
57923
|
}, /* @ts-ignore */
|
|
@@ -59361,9 +59755,9 @@ class PipSlotPlaceholderComponent {
|
|
|
59361
59755
|
...(ngDevMode ? [{ debugName: "bringBackDir" }] : /* istanbul ignore next */ []));
|
|
59362
59756
|
this.cardSurface = computed(() => {
|
|
59363
59757
|
const themes = this.surfaceThemes;
|
|
59364
|
-
if (!themes)
|
|
59365
|
-
return null;
|
|
59366
59758
|
const type = this.surfaceType();
|
|
59759
|
+
if (!themes || !type)
|
|
59760
|
+
return null;
|
|
59367
59761
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
59368
59762
|
return resolveSurfaceByElevation(themes, type, elevation)?.name ?? null;
|
|
59369
59763
|
}, /* @ts-ignore */
|
|
@@ -59764,9 +60158,9 @@ class StreamPlayerSlotDirective {
|
|
|
59764
60158
|
...(ngDevMode ? [undefined, { debugName: "streamSlotOnPipBack" }] : /* istanbul ignore next */ []));
|
|
59765
60159
|
this.resolvedSurface = computed(() => {
|
|
59766
60160
|
const themes = this.surfaceThemes;
|
|
59767
|
-
if (!themes)
|
|
59768
|
-
return null;
|
|
59769
60161
|
const type = this.surfaceType();
|
|
60162
|
+
if (!themes || !type)
|
|
60163
|
+
return null;
|
|
59770
60164
|
const elevation = (this.parentSurfaceProvider?.elevation() ?? 0) + 1;
|
|
59771
60165
|
return resolveSurfaceByElevation(themes, type, elevation);
|
|
59772
60166
|
}, /* @ts-ignore */
|
|
@@ -62699,6 +63093,7 @@ class TableComponent {
|
|
|
62699
63093
|
this.destroyRef = inject(DestroyRef);
|
|
62700
63094
|
this.document = inject(DOCUMENT$1);
|
|
62701
63095
|
this.injectedLabels = injectTableLabels();
|
|
63096
|
+
this.renderer = injectRenderer();
|
|
62702
63097
|
/** The rows to render. */
|
|
62703
63098
|
this.data = input([], /* @ts-ignore */
|
|
62704
63099
|
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
@@ -62862,6 +63257,10 @@ class TableComponent {
|
|
|
62862
63257
|
...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
|
|
62863
63258
|
this.gridRef = viewChild('grid', /* @ts-ignore */
|
|
62864
63259
|
...(ngDevMode ? [{ debugName: "gridRef" }] : /* istanbul ignore next */ []));
|
|
63260
|
+
this.headerGridRef = viewChild('headerGrid', /* @ts-ignore */
|
|
63261
|
+
...(ngDevMode ? [{ debugName: "headerGridRef" }] : /* istanbul ignore next */ []));
|
|
63262
|
+
this.scrollerRef = viewChild('scroller', /* @ts-ignore */
|
|
63263
|
+
...(ngDevMode ? [{ debugName: "scrollerRef" }] : /* istanbul ignore next */ []));
|
|
62865
63264
|
this.headerCells = viewChildren('headerCell', /* @ts-ignore */
|
|
62866
63265
|
...(ngDevMode ? [{ debugName: "headerCells" }] : /* istanbul ignore next */ []));
|
|
62867
63266
|
// Every rendered body cell (tagged with `data-col-key`); the first drives virtual-window
|
|
@@ -62926,6 +63325,10 @@ class TableComponent {
|
|
|
62926
63325
|
// Rows a feature renders above the column headers (the spanning group-header row).
|
|
62927
63326
|
this.headerRowList = signal([], /* @ts-ignore */
|
|
62928
63327
|
...(ngDevMode ? [{ debugName: "headerRowList" }] : /* istanbul ignore next */ []));
|
|
63328
|
+
this.pageStickyHeaderList = signal([], /* @ts-ignore */
|
|
63329
|
+
...(ngDevMode ? [{ debugName: "pageStickyHeaderList" }] : /* istanbul ignore next */ []));
|
|
63330
|
+
this.pageStickyHeader = computed(() => this.pageStickyHeaderList().find((header) => header.enabled()) !== undefined, /* @ts-ignore */
|
|
63331
|
+
...(ngDevMode ? [{ debugName: "pageStickyHeader" }] : /* istanbul ignore next */ []));
|
|
62929
63332
|
this.headerRows = computed(() => this.headerRowList().filter((row) => row.enabled?.() ?? true), /* @ts-ignore */
|
|
62930
63333
|
...(ngDevMode ? [{ debugName: "headerRows" }] : /* istanbul ignore next */ []));
|
|
62931
63334
|
// How a feature pins columns (etTableStickyColumns). Null until one registers, which is what keeps
|
|
@@ -63147,6 +63550,10 @@ class TableComponent {
|
|
|
63147
63550
|
/** The `grid-template-columns` value for the visible columns (plus a leading expander track when expandable). */
|
|
63148
63551
|
this.templateColumns = computed(() => this.columnTracks().template, /* @ts-ignore */
|
|
63149
63552
|
...(ngDevMode ? [{ debugName: "templateColumns" }] : /* istanbul ignore next */ []));
|
|
63553
|
+
this.resolvedPageHeaderColumns = signal(null, /* @ts-ignore */
|
|
63554
|
+
...(ngDevMode ? [{ debugName: "resolvedPageHeaderColumns" }] : /* istanbul ignore next */ []));
|
|
63555
|
+
this.pageHeaderColumns = computed(() => this.resolvedPageHeaderColumns() ?? this.templateColumns(), /* @ts-ignore */
|
|
63556
|
+
...(ngDevMode ? [{ debugName: "pageHeaderColumns" }] : /* istanbul ignore next */ []));
|
|
63150
63557
|
/**
|
|
63151
63558
|
* Whether a trailing filler track is in play. It carries an empty cell in every row so the header
|
|
63152
63559
|
* band, row dividers and vertical rules run to the panel's edge instead of stopping at the last
|
|
@@ -63491,11 +63898,12 @@ class TableComponent {
|
|
|
63491
63898
|
effect(() => {
|
|
63492
63899
|
this.hostDimensions();
|
|
63493
63900
|
this.templateColumns();
|
|
63901
|
+
this.pageStickyHeader();
|
|
63494
63902
|
afterNextRender({ read: () => this.syncScrollState() }, { injector: this.injector });
|
|
63495
63903
|
});
|
|
63496
63904
|
}
|
|
63497
63905
|
syncScrollState() {
|
|
63498
|
-
const element = this.
|
|
63906
|
+
const element = this.scrollElement();
|
|
63499
63907
|
// `scrollLeft` counts down from 0 in RTL, so compare distances rather than raw offsets.
|
|
63500
63908
|
const offset = Math.abs(element.scrollLeft);
|
|
63501
63909
|
const remaining = element.scrollWidth - element.clientWidth - offset;
|
|
@@ -63512,6 +63920,7 @@ class TableComponent {
|
|
|
63512
63920
|
if (shadows.blockStart !== currentShadows.blockStart || shadows.blockEnd !== currentShadows.blockEnd) {
|
|
63513
63921
|
this.blockScrollShadows.set(shadows);
|
|
63514
63922
|
}
|
|
63923
|
+
this.syncPageHeaderScroll(element);
|
|
63515
63924
|
this.syncObscuredColumns();
|
|
63516
63925
|
}
|
|
63517
63926
|
/**
|
|
@@ -63591,6 +64000,10 @@ class TableComponent {
|
|
|
63591
64000
|
registerHeaderRow(row) {
|
|
63592
64001
|
this.headerRowList.update((rows) => [...rows, row]);
|
|
63593
64002
|
}
|
|
64003
|
+
/** Use the split page-sticky header layout. Part of the feature contract; consumers never call this. */
|
|
64004
|
+
registerPageStickyHeader(header) {
|
|
64005
|
+
this.pageStickyHeaderList.update((headers) => [...headers, header]);
|
|
64006
|
+
}
|
|
63594
64007
|
/**
|
|
63595
64008
|
* Called by an opt-in feature to render the loading body (`etTableSkeleton`). Part of the feature
|
|
63596
64009
|
* contract; consumers never call this.
|
|
@@ -63743,7 +64156,7 @@ class TableComponent {
|
|
|
63743
64156
|
/** How many rows fit the scroll viewport. Part of the feature contract - the PageUp/PageDown step. */
|
|
63744
64157
|
rowsPerPage() {
|
|
63745
64158
|
const rowHeight = this.firstBodyCellElement()?.offsetHeight ?? 0;
|
|
63746
|
-
const viewport = this.
|
|
64159
|
+
const viewport = this.scrollElement().clientHeight;
|
|
63747
64160
|
if (!rowHeight || !viewport)
|
|
63748
64161
|
return 1;
|
|
63749
64162
|
return Math.max(1, Math.floor(viewport / rowHeight) - 1);
|
|
@@ -63914,6 +64327,10 @@ class TableComponent {
|
|
|
63914
64327
|
get element() {
|
|
63915
64328
|
return this.elementRef.nativeElement;
|
|
63916
64329
|
}
|
|
64330
|
+
/** The active scroll viewport. Part of the feature contract. */
|
|
64331
|
+
scrollElement() {
|
|
64332
|
+
return this.scrollerRef()?.nativeElement ?? this.elementRef.nativeElement;
|
|
64333
|
+
}
|
|
63917
64334
|
/** The visible columns, in render order. Part of the feature contract. */
|
|
63918
64335
|
visibleColumnsMeta() {
|
|
63919
64336
|
return this.visibleColumns();
|
|
@@ -63922,6 +64339,16 @@ class TableComponent {
|
|
|
63922
64339
|
gridElement() {
|
|
63923
64340
|
return this.gridRef()?.nativeElement ?? null;
|
|
63924
64341
|
}
|
|
64342
|
+
/** The separate page-sticky header grid. Part of the feature contract. */
|
|
64343
|
+
pageHeaderGridElement() {
|
|
64344
|
+
return this.headerGridRef()?.nativeElement ?? null;
|
|
64345
|
+
}
|
|
64346
|
+
/** Use the body grid's resolved column tracks for the page-sticky header. Part of the feature contract. */
|
|
64347
|
+
setPageHeaderColumns(columns) {
|
|
64348
|
+
if (columns === this.resolvedPageHeaderColumns())
|
|
64349
|
+
return;
|
|
64350
|
+
this.resolvedPageHeaderColumns.set(columns);
|
|
64351
|
+
}
|
|
63925
64352
|
/** The rendered header cells, ordered like {@link visibleColumnsMeta}. Part of the feature contract. */
|
|
63926
64353
|
headerCellElements() {
|
|
63927
64354
|
return this.headerCells().map((ref) => ref.nativeElement);
|
|
@@ -63965,7 +64392,7 @@ class TableComponent {
|
|
|
63965
64392
|
* strange state. Stored in `state()` so it round-trips. Part of the feature contract.
|
|
63966
64393
|
*/
|
|
63967
64394
|
setColumnWidth(key, width) {
|
|
63968
|
-
const max = this.
|
|
64395
|
+
const max = this.scrollElement().clientWidth || Number.MAX_SAFE_INTEGER;
|
|
63969
64396
|
const clamped = Math.min(max, Math.max(this.minWidthOf(key), Math.round(width)));
|
|
63970
64397
|
this.columnWidths.update((widths) => ({ ...widths, [key]: clamped }));
|
|
63971
64398
|
}
|
|
@@ -63990,11 +64417,12 @@ class TableComponent {
|
|
|
63990
64417
|
const measurable = keys.filter((key) => this.columnsByKey().has(key));
|
|
63991
64418
|
if (!measurable.length)
|
|
63992
64419
|
return;
|
|
64420
|
+
this.resolvedPageHeaderColumns.set(null);
|
|
63993
64421
|
this.autosizing.set(new Set(measurable));
|
|
63994
64422
|
afterNextRender({
|
|
63995
64423
|
read: () => {
|
|
63996
64424
|
// Read every width before writing any, so committing the first doesn't reflow the rest.
|
|
63997
|
-
const measured = measurable.map((key) => [key, Math.ceil(this.renderedColumnWidth(key))]);
|
|
64425
|
+
const measured = measurable.map((key) => [key, Math.ceil(Math.max(this.renderedColumnWidth(key), this.renderedBodyColumnWidth(key)))]);
|
|
63998
64426
|
this.autosizing.set(new Set());
|
|
63999
64427
|
for (const [key, width] of measured) {
|
|
64000
64428
|
if (width > 0)
|
|
@@ -64021,6 +64449,19 @@ class TableComponent {
|
|
|
64021
64449
|
return next;
|
|
64022
64450
|
});
|
|
64023
64451
|
}
|
|
64452
|
+
// Must stay a same-tick write on the header grid. A requestAnimationFrame hop defers it past the
|
|
64453
|
+
// paint the body already moved in, so the header trails a whole frame; and the property inherits,
|
|
64454
|
+
// so writing it on the host recalculates style for every row cell, which only the header reads.
|
|
64455
|
+
syncPageHeaderScroll(scroller) {
|
|
64456
|
+
const header = this.headerGridRef()?.nativeElement;
|
|
64457
|
+
if (!header)
|
|
64458
|
+
return;
|
|
64459
|
+
this.renderer?.setCssProperties(header, { '--_et-table-inline-scroll': `${scroller.scrollLeft}px` });
|
|
64460
|
+
}
|
|
64461
|
+
renderedBodyColumnWidth(key) {
|
|
64462
|
+
const cell = this.bodyCells().find((ref) => ref.nativeElement.getAttribute('data-col-key') === key);
|
|
64463
|
+
return cell?.nativeElement.getBoundingClientRect().width ?? 0;
|
|
64464
|
+
}
|
|
64024
64465
|
// Which columns have scrolled behind a pinned one. Their cells are hidden by the pinned cells' own
|
|
64025
64466
|
// opaque fill, but anything a feature hangs off a header cell in a portal - a filter menu, a column
|
|
64026
64467
|
// menu - is not: it floats over the pinned column, anchored to a cell nobody can see. floating-ui's
|
|
@@ -64037,7 +64478,7 @@ class TableComponent {
|
|
|
64037
64478
|
const columns = this.visibleColumns();
|
|
64038
64479
|
// One live read per scroll tick over the header row only, which is what this has to compare against
|
|
64039
64480
|
// the pinned edges - `signalElementDimensions` observes a single element and never sees a scroll.
|
|
64040
|
-
const host = this.
|
|
64481
|
+
const host = this.scrollElement().getBoundingClientRect();
|
|
64041
64482
|
const startEdge = host.left + inset.start;
|
|
64042
64483
|
const endEdge = host.right - inset.end;
|
|
64043
64484
|
const next = new Set();
|
|
@@ -64098,10 +64539,10 @@ class TableComponent {
|
|
|
64098
64539
|
return false;
|
|
64099
64540
|
}
|
|
64100
64541
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
64101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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 }, 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", "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: [
|
|
64542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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 }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "attr.role": "pageStickyHeader() ? \"grid\" : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "class.et-table-host--header-adornments": "headerAdornments().length > 0", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
|
|
64102
64543
|
{ provide: TABLE_FEATURE_HOST, useExisting: TableComponent },
|
|
64103
64544
|
provideIcons(ARROW_UP_ICON, TRIANGLE_EXCLAMATION_ICON),
|
|
64104
|
-
], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\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]=\"lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"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 [disabled]=\"cell.disabled\"\n (click)=\"toggleSort(cell.key)\"\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 </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]=\"trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [attr.aria-label]=\"cell.message\"\n [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.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-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.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 }); }
|
|
64545
|
+
], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n @for (headerRow of headerRows(); track $index) {\n <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n }\n\n <div class=\"et-table-header-row\" role=\"row\">\n <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n table owns the cell chrome; the feature only supplies what goes inside. -->\n @for (lead of leadCells(); track lead.key) {\n <div\n #leadHeaderCell\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n one button, and the only sort affordance is the direction arrow, which appears once the\n column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n @if (cell.sortable) {\n <button\n [attr.aria-label]=\"cell.sortLabel\"\n [disabled]=\"cell.disabled\"\n (click)=\"toggleSort(cell.key)\"\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 </span>\n </button>\n } @else {\n <span class=\"et-table-header-label\">\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n </span>\n </span>\n }\n\n <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n registerHeaderAdornment. Renders nothing when no feature is imported.\n\n Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n the trigger is what closes it. -->\n @if (!cell.obscured && headerAdornments().length) {\n <div class=\"et-table-header-adornments\">\n @for (adornment of headerAdornments(); track $index) {\n <ng-container\n *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n />\n }\n </div>\n }\n </div>\n }\n <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n panel's edge when every column is a rigid width. -->\n @if (hasFiller()) {\n <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n @for (trail of trailCells(); track trail.key) {\n <div\n #trailHeaderCell\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #bodyContent>\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [attr.aria-label]=\"cell.message\"\n [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</ng-template>\n\n@if (pageStickyHeader()) {\n <div class=\"et-table-header-strip\">\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\">\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n </div>\n} @else {\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.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-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.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 }); }
|
|
64105
64546
|
}
|
|
64106
64547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, decorators: [{
|
|
64107
64548
|
type: Component,
|
|
@@ -64113,6 +64554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
64113
64554
|
'[attr.data-appearance]': 'appearance()',
|
|
64114
64555
|
'[attr.data-density]': 'density()',
|
|
64115
64556
|
'[attr.aria-busy]': 'resolvedLoading() ? "true" : null',
|
|
64557
|
+
'[attr.role]': 'pageStickyHeader() ? "grid" : null',
|
|
64116
64558
|
'[class.et-table-host--scrolled-block-start]': 'blockScrollShadows().blockStart',
|
|
64117
64559
|
'[class.et-table-host--scrolled-block-end]': 'blockScrollShadows().blockEnd',
|
|
64118
64560
|
'[class.et-table-host--scrolled-inline-start]': 'scrollFades().start',
|
|
@@ -64120,8 +64562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
64120
64562
|
'[class.et-table-host--header-adornments]': 'headerAdornments().length > 0',
|
|
64121
64563
|
'[style.--_et-table-viewport-inline-size.px]': 'viewportInlineSize()',
|
|
64122
64564
|
'(scroll)': 'syncScrollState()',
|
|
64123
|
-
}, 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<div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\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]=\"lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"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 [disabled]=\"cell.disabled\"\n (click)=\"toggleSort(cell.key)\"\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 </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]=\"trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [attr.aria-label]=\"cell.message\"\n [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.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-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.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"] }]
|
|
64124
|
-
}], 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 }] }], 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 }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
|
|
64565
|
+
}, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n @for (headerRow of headerRows(); track $index) {\n <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n }\n\n <div class=\"et-table-header-row\" role=\"row\">\n <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n table owns the cell chrome; the feature only supplies what goes inside. -->\n @for (lead of leadCells(); track lead.key) {\n <div\n #leadHeaderCell\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n one button, and the only sort affordance is the direction arrow, which appears once the\n column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n @if (cell.sortable) {\n <button\n [attr.aria-label]=\"cell.sortLabel\"\n [disabled]=\"cell.disabled\"\n (click)=\"toggleSort(cell.key)\"\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 </span>\n </button>\n } @else {\n <span class=\"et-table-header-label\">\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n </span>\n </span>\n }\n\n <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n registerHeaderAdornment. Renders nothing when no feature is imported.\n\n Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n the trigger is what closes it. -->\n @if (!cell.obscured && headerAdornments().length) {\n <div class=\"et-table-header-adornments\">\n @for (adornment of headerAdornments(); track $index) {\n <ng-container\n *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n />\n }\n </div>\n }\n </div>\n }\n <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n panel's edge when every column is a rigid width. -->\n @if (hasFiller()) {\n <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n @for (trail of trailCells(); track trail.key) {\n <div\n #trailHeaderCell\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #bodyContent>\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [attr.aria-label]=\"cell.message\"\n [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</ng-template>\n\n@if (pageStickyHeader()) {\n <div class=\"et-table-header-strip\">\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\">\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n </div>\n} @else {\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.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-row-link:focus-visible{outline:none}.et-table-row--box:has(.et-table-row-link:focus-visible):before{content:\"\";position:absolute;inset:4px;z-index:5;border:2px solid var(--et-theme-color-primary-solid, currentColor);border-radius:max(0px,calc(var(--_et-table-row-corner, 0px) - 4px));pointer-events:none}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-row{margin-block-end:var(--_et-table-row-gap-block);background:var(--_et-table-row-paint);border-radius:var(--_et-table-row-corner)}.et-table-row--card{--_et-table-row-paint: var(--et-surface-background-solid, Canvas);--_et-table-row-surface: var(--_et-table-row-paint);--_et-table-stripe-solid: var(--_et-table-row-paint);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-paint) );--_et-table-row-pressed-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-paint) );--_et-table-inert-row-hover-solid: var(--_et-table-row-paint);color:var(--et-surface-color-solid, CanvasText)}.et-table-row--card:where(.et-table-row--card-tint){--_et-table-row-paint: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:var(--_et-table-sticky-clip)}.et-table-header-cell{margin-block-end:var(--_et-table-header-gap-block)}.et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: var(--_et-table-inert-row-hover);--_et-table-row-hover-solid: var(--_et-table-inert-row-hover-solid)}.et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-row-link{border-radius:var(--_et-table-row-corner)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.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"] }]
|
|
64566
|
+
}], 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 }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], headerGridRef: [{ type: i0.ViewChild, args: ['headerGrid', { isSignal: true }] }], scrollerRef: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
|
|
64125
64567
|
|
|
64126
64568
|
/**
|
|
64127
64569
|
* Opt-in persistence for a table's setup - column order, visibility, widths, sort, filters, expanded
|
|
@@ -64824,9 +65266,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
64824
65266
|
* the table must not pan instead: dragging in a sub table would scroll the list under it. One that fits
|
|
64825
65267
|
* its content scrolls nothing, so it is left to the table.
|
|
64826
65268
|
*/
|
|
64827
|
-
const hasOwnScroller = (target, host) => {
|
|
65269
|
+
const hasOwnScroller = ({ target, host, tableScroller, }) => {
|
|
64828
65270
|
let element = target instanceof Element ? target : null;
|
|
64829
|
-
while (element !== null && element !== host) {
|
|
65271
|
+
while (element !== null && element !== host && element !== tableScroller) {
|
|
64830
65272
|
const style = getComputedStyle(element);
|
|
64831
65273
|
const scrollsInline = /^(auto|scroll)$/.test(style.overflowX) && element.scrollWidth > element.clientWidth;
|
|
64832
65274
|
const scrollsBlock = /^(auto|scroll)$/.test(style.overflowY) && element.scrollHeight > element.clientHeight;
|
|
@@ -64860,7 +65302,6 @@ const isTextGesture = (target) => target instanceof HTMLInputElement ||
|
|
|
64860
65302
|
class TableDragScrollDirective {
|
|
64861
65303
|
constructor() {
|
|
64862
65304
|
this.table = injectTableFeatureHost('etTableDragScroll');
|
|
64863
|
-
// The feature is a directive on the table, so its host *is* the table's scroll container.
|
|
64864
65305
|
this.elementRef = inject(ElementRef);
|
|
64865
65306
|
this.destroyRef = inject(DestroyRef);
|
|
64866
65307
|
this.injector = inject(Injector);
|
|
@@ -64887,8 +65328,8 @@ class TableDragScrollDirective {
|
|
|
64887
65328
|
});
|
|
64888
65329
|
}
|
|
64889
65330
|
syncScrollable() {
|
|
64890
|
-
const
|
|
64891
|
-
const scrollable = this.enabled() && (
|
|
65331
|
+
const scroller = this.table.scrollElement();
|
|
65332
|
+
const scrollable = this.enabled() && (scroller.scrollWidth > scroller.clientWidth || scroller.scrollHeight > scroller.clientHeight);
|
|
64892
65333
|
if (scrollable !== this.scrollable())
|
|
64893
65334
|
this.scrollable.set(scrollable);
|
|
64894
65335
|
}
|
|
@@ -64909,10 +65350,11 @@ class TableDragScrollDirective {
|
|
|
64909
65350
|
if (!this.scrollable() || isTextGesture(event.target))
|
|
64910
65351
|
return;
|
|
64911
65352
|
const host = this.elementRef.nativeElement;
|
|
64912
|
-
|
|
65353
|
+
const scroller = this.table.scrollElement();
|
|
65354
|
+
if (hasOwnScroller({ target: event.target, host, tableScroller: scroller }))
|
|
64913
65355
|
return;
|
|
64914
|
-
const startLeft =
|
|
64915
|
-
const startTop =
|
|
65356
|
+
const startLeft = scroller.scrollLeft;
|
|
65357
|
+
const startTop = scroller.scrollTop;
|
|
64916
65358
|
dragGestureFrom(event, host)
|
|
64917
65359
|
.pipe(
|
|
64918
65360
|
// Column reorder starts from this same pointerdown and claims the gesture in that handler, so
|
|
@@ -64927,8 +65369,8 @@ class TableDragScrollDirective {
|
|
|
64927
65369
|
this.table.claimPointerGesture(event, 'etTableDragScroll');
|
|
64928
65370
|
}
|
|
64929
65371
|
if (gesture.type === 'move') {
|
|
64930
|
-
|
|
64931
|
-
|
|
65372
|
+
scroller.scrollLeft = startLeft - gesture.data.totalDx;
|
|
65373
|
+
scroller.scrollTop = startTop - gesture.data.totalDy;
|
|
64932
65374
|
}
|
|
64933
65375
|
if (gesture.type === 'end' || gesture.type === 'cancelled')
|
|
64934
65376
|
this.swallowNextClick();
|
|
@@ -66046,53 +66488,34 @@ const injectHostTable = () => {
|
|
|
66046
66488
|
};
|
|
66047
66489
|
|
|
66048
66490
|
/**
|
|
66049
|
-
* The
|
|
66491
|
+
* The split page-sticky header layout, as a styles-only component mounted by `etTablePageStickyHeader` - see
|
|
66050
66492
|
* `TableDragScrollStylesComponent` for the same pattern.
|
|
66051
66493
|
*
|
|
66052
66494
|
* @internal
|
|
66053
66495
|
*/
|
|
66054
66496
|
class TablePageStickyHeaderStylesComponent {
|
|
66055
66497
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66056
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TablePageStickyHeaderStylesComponent, isStandalone: true, selector: "et-table-page-sticky-header-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-
|
|
66498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TablePageStickyHeaderStylesComponent, isStandalone: true, selector: "et-table-page-sticky-header-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-max-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}.et-table-host--page-sticky-header{grid-template-rows:none;overflow:visible;position:relative}.et-table-header-strip{position:sticky;inset-block-start:var(--et-table-sticky-header-offset);min-inline-size:0;overflow:clip;z-index:4}.et-table-header{transform:translate(calc(-1 * var(--_et-table-inline-scroll)))}.et-table-header .et-table-header-cell{position:relative;inset-block-start:auto;margin-block-end:0}.et-table-scroller{padding-block-start:var(--_et-table-header-gap-block);overflow-x:auto;scrollbar-width:inherit}.et-table-header .et-table-header-cell.et-table-sticky-start{transform:translate(var(--_et-table-inline-scroll))}.et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) - var(--_et-table-inline-max-scroll)))}.et-table-host--page-sticky-header:dir(rtl) .et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) + var(--_et-table-inline-max-scroll)))}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
66057
66499
|
}
|
|
66058
66500
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderStylesComponent, decorators: [{
|
|
66059
66501
|
type: Component,
|
|
66060
|
-
args: [{ selector: 'et-table-page-sticky-header-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-
|
|
66502
|
+
args: [{ selector: 'et-table-page-sticky-header-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-inline-max-scroll{syntax: \"<length>\"; inherits: true; initial-value: 0px;}.et-table-host--page-sticky-header{grid-template-rows:none;overflow:visible;position:relative}.et-table-header-strip{position:sticky;inset-block-start:var(--et-table-sticky-header-offset);min-inline-size:0;overflow:clip;z-index:4}.et-table-header{transform:translate(calc(-1 * var(--_et-table-inline-scroll)))}.et-table-header .et-table-header-cell{position:relative;inset-block-start:auto;margin-block-end:0}.et-table-scroller{padding-block-start:var(--_et-table-header-gap-block);overflow-x:auto;scrollbar-width:inherit}.et-table-header .et-table-header-cell.et-table-sticky-start{transform:translate(var(--_et-table-inline-scroll))}.et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) - var(--_et-table-inline-max-scroll)))}.et-table-host--page-sticky-header:dir(rtl) .et-table-header .et-table-header-cell.et-table-sticky-end{transform:translate(calc(var(--_et-table-inline-scroll) + var(--_et-table-inline-max-scroll)))}}\n"] }]
|
|
66061
66503
|
}] });
|
|
66062
66504
|
|
|
66063
66505
|
/**
|
|
66064
|
-
* Keeps the header
|
|
66065
|
-
*
|
|
66066
|
-
* would otherwise leave with the page.
|
|
66506
|
+
* Keeps the header rows of an unbounded, page-scrolled `et-table` at the top of the viewport.
|
|
66507
|
+
* The header stays horizontally aligned with the body and stops at the end of the table.
|
|
66067
66508
|
*
|
|
66068
|
-
*
|
|
66069
|
-
* it can only ever stop at the host's top edge. This travels the header row down the grid instead, by
|
|
66070
|
-
* exactly the distance the page has scrolled past the table, and stops it at the last row. The row keeps
|
|
66071
|
-
* its place in the grid throughout, so the tracks, the pinned columns and the resize grips are untouched
|
|
66072
|
-
* and the header still scrolls sideways with the columns.
|
|
66073
|
-
*
|
|
66074
|
-
* The travel runs on a scroll timeline, so it is the compositor's work and the header never falls behind
|
|
66075
|
-
* the page. This directive only measures: it writes the distance and the two page offsets it runs
|
|
66076
|
-
* between whenever the layout changes, and nothing at all while scrolling.
|
|
66077
|
-
*
|
|
66078
|
-
* Set `--et-table-sticky-header-offset` on the table to stop the header lower than the top of the
|
|
66079
|
-
* viewport - under a page header or a toolbar that is pinned there itself.
|
|
66080
|
-
*
|
|
66081
|
-
* Not for a bounded table: one with a height of its own already pins its header, and one that virtual
|
|
66082
|
-
* scrolls needs the bounded height to do it.
|
|
66509
|
+
* Not for bounded or virtualized tables, which already pin their header inside their own scroll viewport.
|
|
66083
66510
|
*
|
|
66084
66511
|
* @example
|
|
66085
|
-
* <et-table [data]="rows()" [columns]="COLUMNS"
|
|
66512
|
+
* <et-table [data]="rows()" [columns]="COLUMNS" etTablePageStickyHeader />
|
|
66086
66513
|
*/
|
|
66087
66514
|
class TablePageStickyHeaderDirective {
|
|
66088
66515
|
constructor() {
|
|
66089
66516
|
this.table = injectTableFeatureHost('etTablePageStickyHeader');
|
|
66090
|
-
// The feature is a directive on the table, so its host *is* the table's scroll container.
|
|
66091
|
-
this.elementRef = inject(ElementRef);
|
|
66092
66517
|
this.injector = inject(Injector);
|
|
66093
66518
|
this.renderer = injectRenderer();
|
|
66094
|
-
// The offset is a length, so a media query can change it at a width the table itself does not resize at.
|
|
66095
|
-
this.viewportSize = injectViewportSize();
|
|
66096
66519
|
/** See {@link TablePageStickyHeaderConfig}. */
|
|
66097
66520
|
this.config = input({}, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'etTablePageStickyHeader',
|
|
66098
66521
|
transform: (tableFeatureConfig) });
|
|
@@ -66100,53 +66523,36 @@ class TablePageStickyHeaderDirective {
|
|
|
66100
66523
|
this.enabled = computed(() => this.config().enabled ?? true, /* @ts-ignore */
|
|
66101
66524
|
...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
|
|
66102
66525
|
injectStyleManager().mount(TablePageStickyHeaderStylesComponent);
|
|
66103
|
-
|
|
66104
|
-
// can have changed: the host resized, a column was resized, columns came or went, the config was
|
|
66105
|
-
// rebound. Never on scroll - scrolling is the timeline's job, and reading geometry there is what
|
|
66106
|
-
// makes a pinned header lag behind the page.
|
|
66526
|
+
this.table.registerPageStickyHeader({ enabled: this.enabled });
|
|
66107
66527
|
effect(() => {
|
|
66108
66528
|
this.hostDimensions();
|
|
66109
|
-
this.viewportSize();
|
|
66110
66529
|
this.enabled();
|
|
66111
|
-
this.config();
|
|
66112
66530
|
this.table.columnWidths();
|
|
66113
66531
|
this.table.visibleColumnsMeta();
|
|
66532
|
+
this.table.leadColumnsMeta();
|
|
66533
|
+
this.table.trailColumnsMeta();
|
|
66114
66534
|
afterNextRender({ read: () => this.measure() }, { injector: this.injector });
|
|
66115
66535
|
});
|
|
66116
66536
|
}
|
|
66117
66537
|
measure() {
|
|
66118
|
-
const host = this.
|
|
66538
|
+
const host = this.table.element;
|
|
66119
66539
|
const grid = this.table.gridElement();
|
|
66120
|
-
const
|
|
66540
|
+
const headerGrid = this.table.pageHeaderGridElement();
|
|
66541
|
+
const scroller = this.table.scrollElement();
|
|
66121
66542
|
const view = host.ownerDocument.defaultView;
|
|
66122
|
-
if (!this.enabled() || !grid || !
|
|
66123
|
-
this.
|
|
66124
|
-
|
|
66125
|
-
|
|
66126
|
-
|
|
66127
|
-
|
|
66128
|
-
|
|
66129
|
-
|
|
66130
|
-
|
|
66131
|
-
|
|
66132
|
-
const from = Math.max(0, restingTop - this.resolveOffset(host));
|
|
66133
|
-
this.write(host, { travel, from, to: from + travel });
|
|
66134
|
-
}
|
|
66135
|
-
resolveOffset(host) {
|
|
66136
|
-
const raw = getComputedStyle(host).getPropertyValue('--et-table-sticky-header-offset');
|
|
66137
|
-
const parsed = Number.parseFloat(raw);
|
|
66138
|
-
// Registered as a `<length>` (see the stylesheet), so the computed value is always in px.
|
|
66139
|
-
return this.config().offset ?? (Number.isFinite(parsed) ? parsed : 0);
|
|
66140
|
-
}
|
|
66141
|
-
write(host, values) {
|
|
66142
|
-
this.renderer?.setCssProperties(host, {
|
|
66143
|
-
'--_et-table-page-header-travel': `${values.travel}px`,
|
|
66144
|
-
'--_et-table-page-header-from': `${values.from}px`,
|
|
66145
|
-
'--_et-table-page-header-to': `${values.to}px`,
|
|
66146
|
-
});
|
|
66543
|
+
if (!this.enabled() || !grid || !headerGrid || !view) {
|
|
66544
|
+
this.table.setPageHeaderColumns(null);
|
|
66545
|
+
this.writeMaxScroll(host, 0);
|
|
66546
|
+
return;
|
|
66547
|
+
}
|
|
66548
|
+
this.table.setPageHeaderColumns(view.getComputedStyle(grid).gridTemplateColumns);
|
|
66549
|
+
this.writeMaxScroll(host, Math.max(0, scroller.scrollWidth - scroller.clientWidth));
|
|
66550
|
+
}
|
|
66551
|
+
writeMaxScroll(host, maxScroll) {
|
|
66552
|
+
this.renderer?.setCssProperties(host, { '--_et-table-inline-max-scroll': `${maxScroll}px` });
|
|
66147
66553
|
}
|
|
66148
66554
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
66149
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TablePageStickyHeaderDirective, isStandalone: true, selector: "[etTablePageStickyHeader]", inputs: { config: { classPropertyName: "config", publicName: "etTablePageStickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-table-host--page-sticky-header": "enabled()" } }, exportAs: ["etTablePageStickyHeader"], ngImport: i0 }); }
|
|
66555
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TablePageStickyHeaderDirective, isStandalone: true, selector: "[etTablePageStickyHeader]", inputs: { config: { classPropertyName: "config", publicName: "etTablePageStickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-table-host--page-sticky-header": "enabled()", "style.--et-table-sticky-header-offset.px": "config().offset ?? null" } }, exportAs: ["etTablePageStickyHeader"], ngImport: i0 }); }
|
|
66150
66556
|
}
|
|
66151
66557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderDirective, decorators: [{
|
|
66152
66558
|
type: Directive,
|
|
@@ -66155,6 +66561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
|
|
|
66155
66561
|
exportAs: 'etTablePageStickyHeader',
|
|
66156
66562
|
host: {
|
|
66157
66563
|
'[class.et-table-host--page-sticky-header]': 'enabled()',
|
|
66564
|
+
'[style.--et-table-sticky-header-offset.px]': 'config().offset ?? null',
|
|
66158
66565
|
},
|
|
66159
66566
|
}]
|
|
66160
66567
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "etTablePageStickyHeader", required: false }] }] } });
|
|
@@ -66343,7 +66750,7 @@ class TableReorderDirective {
|
|
|
66343
66750
|
* drag has to travel all the way past the pinned column before the table moves at all.
|
|
66344
66751
|
*/
|
|
66345
66752
|
syncAutoScroll(clientX) {
|
|
66346
|
-
const bounds = this.table.
|
|
66753
|
+
const bounds = this.table.scrollElement().getBoundingClientRect();
|
|
66347
66754
|
const frozen = this.table.frozenInsets();
|
|
66348
66755
|
const intoStart = AUTO_SCROLL_ZONE_PX - (clientX - (bounds.left + frozen.start));
|
|
66349
66756
|
const intoEnd = AUTO_SCROLL_ZONE_PX - (bounds.right - frozen.end - clientX);
|
|
@@ -66358,11 +66765,11 @@ class TableReorderDirective {
|
|
|
66358
66765
|
this.stepAutoScroll();
|
|
66359
66766
|
}
|
|
66360
66767
|
stepAutoScroll() {
|
|
66361
|
-
const
|
|
66362
|
-
const before =
|
|
66363
|
-
|
|
66768
|
+
const scroller = this.table.scrollElement();
|
|
66769
|
+
const before = scroller.scrollLeft;
|
|
66770
|
+
scroller.scrollLeft = before + this.autoScrollStep;
|
|
66364
66771
|
// The table is already at that end, so stop rather than run a frame per tick doing nothing.
|
|
66365
|
-
if (
|
|
66772
|
+
if (scroller.scrollLeft === before) {
|
|
66366
66773
|
this.stopAutoScroll();
|
|
66367
66774
|
return;
|
|
66368
66775
|
}
|
|
@@ -67347,7 +67754,7 @@ class TableVirtualScrollDirective {
|
|
|
67347
67754
|
this.config = input({}, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'etTableVirtualScroll',
|
|
67348
67755
|
transform: (tableFeatureConfig) });
|
|
67349
67756
|
this.window = createVirtualWindow({
|
|
67350
|
-
container: computed(() => this.table.
|
|
67757
|
+
container: computed(() => this.table.scrollElement()),
|
|
67351
67758
|
itemCount: computed(() => this.table.rows().length),
|
|
67352
67759
|
estimateItemHeight: computed(() => this.config().estimateRowHeight ?? 48),
|
|
67353
67760
|
overscan: computed(() => this.config().overscan ?? 6),
|
|
@@ -69515,11 +69922,11 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
|
|
|
69515
69922
|
|
|
69516
69923
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
69517
69924
|
/** The version of `@ethlete/components` this build was cut from. */
|
|
69518
|
-
const COMPONENTS_VERSION = '1.0.0-next.
|
|
69925
|
+
const COMPONENTS_VERSION = '1.0.0-next.58';
|
|
69519
69926
|
|
|
69520
69927
|
/**
|
|
69521
69928
|
* Generated bundle index. Do not edit.
|
|
69522
69929
|
*/
|
|
69523
69930
|
|
|
69524
|
-
export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, 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_SHAPES, AVATAR_SIZES, 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_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, 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, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, 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, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, 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, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, 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_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, 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_CHIP_LABELS, DEFAULT_COLOR_INPUT_LABELS, DEFAULT_COMMAND_PALETTE_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_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_PIP_WINDOW_CONFIG, 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_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, 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, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, 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_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, 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_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, 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, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, 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, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, 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, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, 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, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, 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, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, 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, 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, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, 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, TableRowDetailComponent, TableRowExpansionDirective, TableRowRouterLinkDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, 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, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, canonicalKbdKey, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, colorContrast, commandPaletteLabelsForLocale, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, focusFirstInvalidField, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectColorInputLabels, injectCommandPalette, injectCommandPaletteLabels, injectCommandPaletteRegistry, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, matchesKbdChord, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountNavTabLinkStyles, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideColorInputLabels, provideCommandPaletteLabels, provideCommandPaletteRegistry, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerCommands, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toFieldWarnings, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
|
|
69931
|
+
export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, 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_SHAPES, AVATAR_SIZES, 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_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, 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, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, 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, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, 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, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, 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_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, 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_CHIP_LABELS, DEFAULT_COLOR_INPUT_LABELS, DEFAULT_COMMAND_PALETTE_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_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_PIP_WINDOW_CONFIG, 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_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, 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, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, 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_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, 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_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, 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, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, 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, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, 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, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, 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_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, 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, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, ScrollbarComponent, ScrollbarDirective, ScrollbarThumbDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, 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, 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, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, 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, TableRowDetailComponent, TableRowExpansionDirective, TableRowRouterLinkDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, 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, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, canonicalKbdKey, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, colorContrast, commandPaletteLabelsForLocale, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, focusFirstInvalidField, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectColorInputLabels, injectCommandPalette, injectCommandPaletteLabels, injectCommandPaletteRegistry, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, matchesKbdChord, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountNavTabLinkStyles, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideColorInputLabels, provideCommandPaletteLabels, provideCommandPaletteRegistry, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerCommands, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toFieldWarnings, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
|
|
69525
69932
|
//# sourceMappingURL=ethlete-components.mjs.map
|