@ethlete/components 1.0.0-next.61 → 1.0.0-next.63
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 +32 -0
- package/fesm2022/ethlete-components.mjs +233 -190
- package/fesm2022/ethlete-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ethlete-components.d.ts +67 -59
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
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, afterRenderEffect, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, isSignal, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, PLATFORM_ID } from '@angular/core';
|
|
2
|
+
import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Renderer2, Injector, output, runInInjectionContext, contentChild, NgZone, afterRenderEffect, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, isSignal, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, PLATFORM_ID, CSP_NONCE } from '@angular/core';
|
|
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, isElement, injectBreakpointObserver, isHTMLElement, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation,
|
|
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, isElement, injectBreakpointObserver, isHTMLElement, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, markdownToHtml, injectHasTouchInput, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, signalElementMutations, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
|
|
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 { DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, COMMON_BRACKET_ROUND_TYPE, BRACKET_ERROR_CODES, SWISS_BRACKET_ROUND_TYPE, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, TOURNAMENT_MODE, BRACKET_DATA_LAYOUT, resolveBracketLayout as resolveBracketLayout$1, createBracket, drawMan, createDoubleEliminationGrid, createStackedDoubleEliminationGrid, createSingleEliminationGrid, generateBracketRoundSwissGroupMaps, createSwissGrid, drawSwissMan, standingPickStartOrder } from '@ethlete/bracket';
|
|
@@ -11,7 +11,7 @@ import { Subject, take, tap, defer, map, finalize, timer, takeUntil, fromEvent,
|
|
|
11
11
|
import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
|
|
12
12
|
import * as i1$1 from '@angular/router';
|
|
13
13
|
import { Router, RouterLink, ActivatedRoute, RouterLinkActive, NavigationEnd } from '@angular/router';
|
|
14
|
-
import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, executeUntilSettled
|
|
14
|
+
import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, executeUntilSettled$, extractQuery, queryComputed, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, createQueryErrorResponse } from '@ethlete/query';
|
|
15
15
|
import { createMetadataKey, metadata, FORM_FIELD, validate, createManagedMetadataKey, submit, form } from '@angular/forms/signals';
|
|
16
16
|
import { TZDate } from '@date-fns/tz';
|
|
17
17
|
import { enUS } from 'date-fns/locale/en-US';
|
|
@@ -1258,7 +1258,7 @@ class IconDirective {
|
|
|
1258
1258
|
}
|
|
1259
1259
|
}
|
|
1260
1260
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: IconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1261
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: IconDirective, isStandalone: true, selector: "[etIcon]", inputs: { iconNameToUse: { classPropertyName: "iconNameToUse", publicName: "etIcon", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, allowHardcodedColor: { classPropertyName: "allowHardcodedColor", publicName: "allowHardcodedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSrc()", "attr.aria-hidden": "label() ? null : \"true\"", "attr.role": "label() ? \"img\" : null", "attr.aria-label": "label()", "class": "hostClasses()"
|
|
1261
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: IconDirective, isStandalone: true, selector: "[etIcon]", inputs: { iconNameToUse: { classPropertyName: "iconNameToUse", publicName: "etIcon", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, allowHardcodedColor: { classPropertyName: "allowHardcodedColor", publicName: "allowHardcodedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSrc()", "attr.aria-hidden": "label() ? null : \"true\"", "attr.role": "label() ? \"img\" : null", "attr.aria-label": "label()", "class": "hostClasses()", "style.display": "\"flex\"", "style.align-items": "\"center\"", "style.justify-content": "\"center\"" } }, providers: [
|
|
1262
1262
|
{
|
|
1263
1263
|
provide: ICON_DIRECTIVE_TOKEN,
|
|
1264
1264
|
useExisting: IconDirective,
|
|
@@ -1283,7 +1283,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
1283
1283
|
'[attr.role]': 'label() ? "img" : null',
|
|
1284
1284
|
'[attr.aria-label]': 'label()',
|
|
1285
1285
|
'[class]': 'hostClasses()',
|
|
1286
|
-
style: '
|
|
1286
|
+
'[style.display]': '"flex"',
|
|
1287
|
+
'[style.align-items]': '"center"',
|
|
1288
|
+
'[style.justify-content]': '"center"',
|
|
1287
1289
|
},
|
|
1288
1290
|
}]
|
|
1289
1291
|
}], ctorParameters: () => [], propDecorators: { iconNameToUse: [{ type: i0.Input, args: [{ isSignal: true, alias: "etIcon", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], allowHardcodedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHardcodedColor", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
@@ -2449,9 +2451,12 @@ class ButtonDirective {
|
|
|
2449
2451
|
...(ngDevMode ? [{ debugName: "isInactive" }] : /* istanbul ignore next */ []));
|
|
2450
2452
|
this.hasProgress = computed(() => this.progress() !== null, /* @ts-ignore */
|
|
2451
2453
|
...(ngDevMode ? [{ debugName: "hasProgress" }] : /* istanbul ignore next */ []));
|
|
2454
|
+
// Must stay a capture listener: at the target, capture listeners run before every bubble
|
|
2455
|
+
// listener, so this beats a consumer's template `(click)` on the same element. As a bubble
|
|
2456
|
+
// listener it runs after them, and a loading button or disabled link fires the consumer's handler.
|
|
2457
|
+
const unlisten = inject(Renderer2).listen(this.elementRef.nativeElement, 'click', (event) => this.blockInactiveClick(event), { capture: true });
|
|
2458
|
+
inject(DestroyRef).onDestroy(unlisten);
|
|
2452
2459
|
}
|
|
2453
|
-
// A loading button sets no native `disabled`, so it keeps DOM focus and its place in the tab
|
|
2454
|
-
// order. Nothing else stops the click a keyboard activation dispatches.
|
|
2455
2460
|
blockInactiveClick(event) {
|
|
2456
2461
|
if (!this.isInactive()) {
|
|
2457
2462
|
return;
|
|
@@ -2460,7 +2465,7 @@ class ButtonDirective {
|
|
|
2460
2465
|
event.stopImmediatePropagation();
|
|
2461
2466
|
}
|
|
2462
2467
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2463
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: {
|
|
2468
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && disabled() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "ariaPressed()", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && disabled() ? -1 : ownTabIndex" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i1.SurfaceInteractiveDirective }], ngImport: i0 }); }
|
|
2464
2469
|
}
|
|
2465
2470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
2466
2471
|
type: Directive,
|
|
@@ -2477,10 +2482,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
2477
2482
|
'[attr.aria-pressed]': 'ariaPressed()',
|
|
2478
2483
|
'[attr.type]': 'IS_BUTTON ? type() : null',
|
|
2479
2484
|
'[attr.tabindex]': 'IS_ANCHOR && disabled() ? -1 : ownTabIndex',
|
|
2480
|
-
'(click)': 'blockInactiveClick($event)',
|
|
2481
2485
|
},
|
|
2482
2486
|
}]
|
|
2483
|
-
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
|
|
2487
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
|
|
2484
2488
|
|
|
2485
2489
|
const INHERIT_COLOR = 'inherit';
|
|
2486
2490
|
class ButtonColorDirective {
|
|
@@ -3857,8 +3861,8 @@ const PICTURE_IMPORTS = [PictureComponent, PicturePlaceholderDirective, PictureE
|
|
|
3857
3861
|
*
|
|
3858
3862
|
* @example
|
|
3859
3863
|
* <et-skeleton-item shape="text" />
|
|
3860
|
-
* <et-skeleton-item shape="circle" style
|
|
3861
|
-
* <et-skeleton-item style
|
|
3864
|
+
* <et-skeleton-item shape="circle" [style.--et-skeleton-size.px]="40" />
|
|
3865
|
+
* <et-skeleton-item [style.block-size.px]="120" [style.border-radius.px]="12" />
|
|
3862
3866
|
*/
|
|
3863
3867
|
class SkeletonItemComponent {
|
|
3864
3868
|
constructor() {
|
|
@@ -3928,7 +3932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
3928
3932
|
*
|
|
3929
3933
|
* @example
|
|
3930
3934
|
* <et-skeleton>
|
|
3931
|
-
* <et-skeleton-item shape="circle" style
|
|
3935
|
+
* <et-skeleton-item shape="circle" [style.--et-skeleton-size.px]="40" />
|
|
3932
3936
|
* <et-skeleton-text lines="3" />
|
|
3933
3937
|
* </et-skeleton>
|
|
3934
3938
|
*/
|
|
@@ -6816,14 +6820,14 @@ class OverlayContainerComponent {
|
|
|
6816
6820
|
return host;
|
|
6817
6821
|
}
|
|
6818
6822
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6819
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, componentDirectives: { classPropertyName: "componentDirectives", publicName: "componentDirectives", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null }, renderDragHandle: { classPropertyName: "renderDragHandle", publicName: "renderDragHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "@if (renderDragHandle()) {\n <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--
|
|
6823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, componentBindings: { classPropertyName: "componentBindings", publicName: "componentBindings", isSignal: true, isRequired: false, transformFunction: null }, componentDirectives: { classPropertyName: "componentDirectives", publicName: "componentDirectives", isSignal: true, isRequired: false, transformFunction: null }, renderArrow: { classPropertyName: "renderArrow", publicName: "renderArrow", isSignal: true, isRequired: false, transformFunction: null }, renderDragHandle: { classPropertyName: "renderDragHandle", publicName: "renderDragHandle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-with-default-animation": "!overlayRef.config.customAnimated" }, classAttribute: "et-overlay" }, providers: [provideBoundaryElement()], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "@if (renderDragHandle()) {\n <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--_et-overlay-radius: var(--et-overlay-radius, 1.6rem);position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){overflow:auto;border-radius:inherit}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main){display:grid}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--_et-overlay-radius: var(--et-overlay-radius, 1.2rem)}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--_et-overlay-radius);border-start-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--_et-overlay-radius);border-end-start-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6820
6824
|
}
|
|
6821
6825
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OverlayContainerComponent, decorators: [{
|
|
6822
6826
|
type: Component,
|
|
6823
6827
|
args: [{ selector: 'et-overlay-container', encapsulation: ViewEncapsulation.None, providers: [provideBoundaryElement()], hostDirectives: [AnimatedLifecycleDirective, ProvideColorDirective, ProvideSurfaceDirective], host: {
|
|
6824
6828
|
class: 'et-overlay',
|
|
6825
6829
|
'[class.et-with-default-animation]': '!overlayRef.config.customAnimated',
|
|
6826
|
-
}, template: "@if (renderDragHandle()) {\n <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--
|
|
6830
|
+
}, template: "@if (renderDragHandle()) {\n <div class=\"et-overlay-container-drag-handle\"></div>\n}\n<ng-container #contentOutlet />\n@if (renderArrow()) {\n <div class=\"et-overlay-arrow\" et-floating-arrow></div>\n}\n", styles: ["@layer components{.et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--et-overlay-surface-background: var(--et-surface-background-solid, rgb(32 32 32));--et-overlay-surface-color: var(--et-surface-color-solid, rgb(244 244 245));--et-overlay-surface-border-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));--et-overlay-surface-border-width: .1rem;--_et-overlay-radius: var(--et-overlay-radius, 1.6rem);position:relative;display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){overflow:auto;border-radius:inherit}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main){display:grid}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-router-outlet-host){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow):not(.et-overlay-main):has(.et-overlay-sidebar--visible){grid-template-columns:auto minmax(0,1fr)}.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered{overflow:visible;background:transparent}:is(.et-overlay.et-overlay--anchored,.et-overlay.et-overlay--centered)>:not(.et-overlay-container-drag-handle):not(.et-overlay-arrow){display:block;overflow:visible}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog,.et-overlay.et-overlay--full-screen-dialog,.et-overlay.et-overlay--bottom-sheet,.et-overlay.et-overlay--top-sheet,.et-overlay.et-overlay--left-sheet,.et-overlay.et-overlay--right-sheet{background-color:var(--et-overlay-surface-background);color:var(--et-overlay-surface-color)}.et-overlay.et-overlay--dialog,.et-overlay.et-overlay--anchored-dialog{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--anchored-dialog{--_et-overlay-radius: var(--et-overlay-radius, 1.2rem)}.et-overlay.et-overlay--bottom-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-end:none;border-start-start-radius:var(--_et-overlay-radius);border-start-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--top-sheet{border:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-block-start:none;border-end-start-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--left-sheet{border-inline-end:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-end-radius:var(--_et-overlay-radius);border-end-end-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--right-sheet{border-inline-start:var(--et-overlay-surface-border-width) solid var(--et-overlay-surface-border-color);border-start-start-radius:var(--_et-overlay-radius);border-end-start-radius:var(--_et-overlay-radius)}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{grid-template-rows:auto minmax(0,1fr);display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-runtime-backdrop{--et-overlay-backdrop-color: rgb(0 0 0 / .32);background-color:var(--et-overlay-backdrop-color);opacity:0;transition:opacity .2s linear}.et-overlay-runtime-backdrop.et-overlay-backdrop--visible{opacity:1}.et-overlay-backdrop--hidden{display:none!important}.et-force-invisible{visibility:hidden!important}}\n"] }]
|
|
6827
6831
|
}], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: true }] }], componentBindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentBindings", required: false }] }], componentDirectives: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentDirectives", required: false }] }], renderArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderArrow", required: false }] }], renderDragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderDragHandle", required: false }] }], contentOutlet: [{ type: i0.ViewChild, args: ['contentOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
|
|
6828
6832
|
|
|
6829
6833
|
/**
|
|
@@ -10384,6 +10388,23 @@ const OVERLAY_SCROLL_BLOCKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
10384
10388
|
...(ngDevMode ? [{ debugName: "hasBlockingOverlay" }] : /* istanbul ignore next */ []));
|
|
10385
10389
|
const root = document.documentElement;
|
|
10386
10390
|
let savedTop = null;
|
|
10391
|
+
const unlock = () => {
|
|
10392
|
+
if (savedTop === null)
|
|
10393
|
+
return;
|
|
10394
|
+
const top = savedTop;
|
|
10395
|
+
savedTop = null;
|
|
10396
|
+
renderer.setStyle(root, {
|
|
10397
|
+
position: null,
|
|
10398
|
+
top: null,
|
|
10399
|
+
left: null,
|
|
10400
|
+
right: null,
|
|
10401
|
+
overflowY: null,
|
|
10402
|
+
scrollBehavior: 'auto',
|
|
10403
|
+
});
|
|
10404
|
+
document.defaultView?.scrollTo(0, top);
|
|
10405
|
+
renderer.setStyle(root, { scrollBehavior: null });
|
|
10406
|
+
};
|
|
10407
|
+
inject(DestroyRef).onDestroy(unlock);
|
|
10387
10408
|
combineLatest([toObservable(hasBlockingOverlay), toObservable(documentScrollState)])
|
|
10388
10409
|
.pipe(tap(([hasOpenOverlays, scrollState]) => {
|
|
10389
10410
|
if (hasOpenOverlays && scrollState.canScrollVertically && savedTop === null) {
|
|
@@ -10396,19 +10417,8 @@ const OVERLAY_SCROLL_BLOCKER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
10396
10417
|
overflowY: 'scroll',
|
|
10397
10418
|
});
|
|
10398
10419
|
}
|
|
10399
|
-
else if (!hasOpenOverlays
|
|
10400
|
-
|
|
10401
|
-
savedTop = null;
|
|
10402
|
-
renderer.setStyle(root, {
|
|
10403
|
-
position: null,
|
|
10404
|
-
top: null,
|
|
10405
|
-
left: null,
|
|
10406
|
-
right: null,
|
|
10407
|
-
overflowY: null,
|
|
10408
|
-
scrollBehavior: 'auto',
|
|
10409
|
-
});
|
|
10410
|
-
document.defaultView?.scrollTo(0, top);
|
|
10411
|
-
renderer.setStyle(root, { scrollBehavior: null });
|
|
10420
|
+
else if (!hasOpenOverlays) {
|
|
10421
|
+
unlock();
|
|
10412
10422
|
}
|
|
10413
10423
|
}), takeUntilDestroyed())
|
|
10414
10424
|
.subscribe();
|
|
@@ -21720,11 +21730,11 @@ const FORM_FIELD_LABELS = /* @__PURE__ */ toToken(FORM_FIELD_LABELS_DEF);
|
|
|
21720
21730
|
*/
|
|
21721
21731
|
class FormFieldTextShellStylesComponent {
|
|
21722
21732
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldTextShellStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormFieldTextShellStylesComponent, isStandalone: true, selector: "et-form-field-text-shell-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md],:not([data-size])){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field[data-text-shell][data-label-mode=static][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-control-area{position:static}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field[data-text-shell][data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) .et-select-value[data-placeholder]{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{color:transparent}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) .et-select-value[data-placeholder]{color:transparent}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-outside][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field[data-text-shell][data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field[data-text-shell] .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-label-area,et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field[data-text-shell][data-readonly] .et-form-field-shell,et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame,et-form-field[data-text-shell][data-readonly] .et-form-field-label-area,et-form-field[data-text-shell][data-readonly] .et-form-field-control,et-form-field[data-text-shell][data-readonly] input,et-form-field[data-text-shell][data-readonly] textarea,et-form-field[data-text-shell][data-readonly] [contenteditable]{cursor:default}et-form-field[data-text-shell][data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field[data-text-shell][data-disabled] .et-form-field-shell{cursor:not-allowed}et-form-field[data-text-shell][data-disabled] .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field[data-text-shell][data-disabled] .et-form-field-label-area{cursor:not-allowed}et-form-field[data-text-shell][data-appearance=underline]{--et-form-field-control-min-height: calc( var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) + var(--et-form-field-control-padding-block) * 2 )}et-form-field[data-text-shell][data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
21733
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FormFieldTextShellStylesComponent, isStandalone: true, selector: "et-form-field-text-shell-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--_et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md],:not([data-size])){--et-form-field-gap: 5px;--_et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--_et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field[data-text-shell][data-label-mode=static][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-control-area{position:static}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field[data-text-shell][data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) .et-select-value[data-placeholder]{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{color:transparent}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) .et-select-value[data-placeholder]{color:transparent}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-outside][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field[data-text-shell][data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field[data-text-shell] .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-label-area,et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field[data-text-shell][data-readonly] .et-form-field-shell,et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame,et-form-field[data-text-shell][data-readonly] .et-form-field-label-area,et-form-field[data-text-shell][data-readonly] .et-form-field-control,et-form-field[data-text-shell][data-readonly] input,et-form-field[data-text-shell][data-readonly] textarea,et-form-field[data-text-shell][data-readonly] [contenteditable]{cursor:default}et-form-field[data-text-shell][data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field[data-text-shell][data-disabled] .et-form-field-shell{cursor:not-allowed}et-form-field[data-text-shell][data-disabled] .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field[data-text-shell][data-disabled] .et-form-field-label-area{cursor:not-allowed}et-form-field[data-text-shell][data-appearance=underline]{--et-form-field-control-min-height: calc( var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) + var(--et-form-field-control-padding-block) * 2 )}et-form-field[data-text-shell][data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
21724
21734
|
}
|
|
21725
21735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldTextShellStylesComponent, decorators: [{
|
|
21726
21736
|
type: Component,
|
|
21727
|
-
args: [{ selector: 'et-form-field-text-shell-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--
|
|
21737
|
+
args: [{ selector: 'et-form-field-text-shell-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--_et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md],:not([data-size])){--et-form-field-gap: 5px;--_et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--_et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var( --et-surface-background-solid, var(--et-surface-base-solid, transparent) )}et-form-field[data-text-shell][data-label-mode=static][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-control-area{position:static}et-form-field[data-text-shell][data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field[data-text-shell][data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field[data-text-shell][data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]) .et-select-value[data-placeholder]{transition:color .15s ease}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) :is(.et-input-native,.et-number-input-native,.et-textarea-native)::placeholder{color:transparent}:is(et-form-field[data-text-shell][data-label-mode=floating-inside],et-form-field[data-text-shell][data-label-mode=floating-outside]):not([data-label-floated]) .et-select-value[data-placeholder]{color:transparent}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field[data-text-shell][data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-outside][data-has-label] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field[data-text-shell][data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field[data-text-shell][data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field[data-text-shell][data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field[data-text-shell][data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field[data-text-shell] .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-label-area,et-form-field[data-text-shell]:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(:has(.et-form-field-control-frame:hover),:has(.et-form-field-label-area:hover)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-expanded]:not([data-readonly])) .et-form-field-affix,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-label-area,et-form-field[data-text-shell]:where([data-focused]:not([data-readonly])) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field[data-text-shell][data-readonly] .et-form-field-shell,et-form-field[data-text-shell][data-readonly] .et-form-field-control-frame,et-form-field[data-text-shell][data-readonly] .et-form-field-label-area,et-form-field[data-text-shell][data-readonly] .et-form-field-control,et-form-field[data-text-shell][data-readonly] input,et-form-field[data-text-shell][data-readonly] textarea,et-form-field[data-text-shell][data-readonly] [contenteditable]{cursor:default}et-form-field[data-text-shell][data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field[data-text-shell][data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field[data-text-shell][data-disabled] .et-form-field-shell{cursor:not-allowed}et-form-field[data-text-shell][data-disabled] .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field[data-text-shell][data-disabled] .et-form-field-label-area{cursor:not-allowed}et-form-field[data-text-shell][data-appearance=underline]{--et-form-field-control-min-height: calc( var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) + var(--et-form-field-control-padding-block) * 2 )}et-form-field[data-text-shell][data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field[data-text-shell][data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}}\n"] }]
|
|
21728
21738
|
}] });
|
|
21729
21739
|
/**
|
|
21730
21740
|
* Mounts the text-field shell stylesheet. Call from the constructor of every control that renders
|
|
@@ -25024,7 +25034,7 @@ class FormFieldComponent {
|
|
|
25024
25034
|
this.formFieldDir.activate();
|
|
25025
25035
|
}
|
|
25026
25036
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25027
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
25037
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "formFieldDir.isHidden() ? \"none\" : null", "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "support.displaysError() || null", "attr.data-warning": "support.displaysWarning() || null", "attr.aria-busy": "isBusy() ? \"true\" : null", "attr.data-busy": "isBusy() || null", "attr.data-expanded": "formFieldDir.usesTextFieldShell() && formFieldDir.expanded() ? \"\" : null", "attr.data-focused": "formFieldDir.usesTextFieldShell() && formFieldDir.focused() ? \"\" : null", "attr.data-readonly": "formFieldDir.usesTextFieldShell() && formFieldDir.isReadonly() ? \"\" : null", "attr.data-disabled": "formFieldDir.usesTextFieldShell() && formFieldDir.isDisabled() ? \"\" : null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-has-label": "formFieldDir.registeredLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "warningContent", first: true, predicate: ["warningContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "counterContent", first: true, predicate: ["counterContent"], descendants: true, isSignal: true }, { propertyName: "controlFrame", first: true, predicate: ["controlFrame"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "warningAnimatable", first: true, predicate: ["warningAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i1.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "component", type: FormWarningComponent, selector: "et-form-warning", inputs: ["warning"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
25028
25038
|
}
|
|
25029
25039
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
25030
25040
|
type: Component,
|
|
@@ -25064,7 +25074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
25064
25074
|
'[attr.data-size]': 'formFieldDir.usesTextFieldShell() ? size() : null',
|
|
25065
25075
|
'[attr.data-text-shell]': 'formFieldDir.usesTextFieldShell() || null',
|
|
25066
25076
|
'[style.--_et-form-field-prefix-offset]': 'prefixOffset()',
|
|
25067
|
-
}, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"] }]
|
|
25077
|
+
}, template: "<div class=\"et-form-field-shell\">\n <div #controlFrame (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n <ng-content select=\"[etInputPrefix]\" />\n </div>\n\n <div class=\"et-form-field-control-area\">\n <div\n [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n class=\"et-form-field-label-area\"\n >\n <ng-content select=\"et-label\" />\n </div>\n\n <div class=\"et-form-field-control-slot\">\n <ng-content />\n </div>\n </div>\n\n <div class=\"et-form-field-affix et-form-field-suffix\">\n <!-- Before the consumer's suffix: nothing may come between a control's own affordances and\n the field they belong to. -->\n @if (formFieldDir.registeredControlSuffix(); as controlSuffix) {\n <ng-template [ngTemplateOutlet]=\"controlSuffix.templateRef\" />\n }\n\n <ng-content select=\"[etInputSuffix]\" />\n\n <!-- After the consumer's own suffix, never instead of it. -->\n @if (showBusySpinner()) {\n <et-spinner class=\"et-form-field-busy-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n </div>\n </div>\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n <div class=\"et-form-field-support-row\">\n <div class=\"et-form-field-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.errorId()\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [attr.data-direction]=\"support.errorDirection()\"\n [attr.data-state]=\"support.errorState()\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-form-field-support-content et-form-field-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderWarning()) {\n <div\n #warningContent\n #warningAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.warningId()\"\n [attr.aria-atomic]=\"support.warningActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.warningActive() ? 'true' : null\"\n [attr.aria-live]=\"support.warningActive() ? 'polite' : null\"\n [attr.data-active]=\"support.warningActive() || null\"\n [attr.data-direction]=\"support.warningDirection()\"\n [attr.data-state]=\"support.warningState()\"\n [etProvideColor]=\"support.warningColorTheme()\"\n class=\"et-form-field-support-content et-form-field-warnings\"\n etAnimatable\n >\n @for (warning of support.visibleWarnings(); track $index) {\n <et-form-warning [warning]=\"warning\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [id]=\"formFieldDir.hintId()\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n [attr.data-direction]=\"support.hintDirection()\"\n [attr.data-state]=\"support.hintState()\"\n class=\"et-form-field-support-content et-form-field-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n\n <!-- Carries the error theme so the counter's own over-limit styling can reach the semantic\n error color even before the field shows an error. -->\n <div\n #counterContent\n [etProvideColor]=\"support.errorColorTheme\"\n [hidden]=\"!formFieldDir.registeredCounter()\"\n class=\"et-form-field-support-counter\"\n >\n <ng-content select=\"et-counter\" />\n </div>\n </div>\n </div>\n}\n", styles: ["@layer components{@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-affix-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-warning-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;--_et-form-field-suffix-fade: 24px;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--et-form-field-control-affix-gap);color:var(--et-surface-color-muted-solid, currentColor);pointer-events:none;transition:color .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is([etInputPrefix],[etInputSuffix],.et-form-field-busy-spinner){opacity:.78;transition:opacity .15s ease}et-form-field .et-form-field-affix>.et-icon{flex:none;inline-size:var(--et-form-field-affix-icon-size);block-size:var(--et-form-field-affix-icon-size)}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-busy-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)){--_et-form-field-suffix-overlap: calc( var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-cover: calc( var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap) );--_et-form-field-suffix-mask-direction: to right}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)):dir(rtl){--_et-form-field-suffix-mask-direction: to left}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot{-webkit-mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)));mask-image:linear-gradient(var(--_et-form-field-suffix-mask-direction),black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),transparent calc(100% - var(--_et-form-field-suffix-cover)))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>:is(.et-input-clear,.et-form-field-busy-spinner)) .et-form-field-control-slot :is(input,textarea):last-of-type:is(:focus,[data-text-align=end],[data-text-align=center]){padding-inline-end:calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade))}et-form-field .et-form-field-control-frame:has(>.et-form-field-suffix>.et-input-clear):has(>.et-form-field-suffix>.et-form-field-busy-spinner){--_et-form-field-suffix-overlap: calc( 2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)) )}et-form-field .et-form-field-suffix:is(:has(>.et-input-clear),:has(>.et-form-field-busy-spinner)){position:relative;z-index:1;align-self:stretch;padding-inline-start:var(--_et-form-field-suffix-fade);margin-inline-start:calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)))}et-form-field .et-form-field-support-row{display:flex;align-items:flex-start;gap:var(--et-form-field-support-gap, .8rem)}et-form-field .et-form-field-support-stack{position:relative;display:grid;flex:1 1 auto;min-inline-size:0}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0}et-form-field .et-form-field-support-content[data-active]{opacity:1}et-form-field .et-form-field-support-content[data-state=leaving]{position:absolute;inset:0;pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-warnings{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-warning-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active]{opacity:0}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms}}}\n"] }]
|
|
25068
25078
|
}], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], warningContent: [{ type: i0.ViewChild, args: ['warningContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], counterContent: [{ type: i0.ViewChild, args: ['counterContent', { isSignal: true }] }], controlFrame: [{ type: i0.ViewChild, args: ['controlFrame', { isSignal: true }] }], prefixEl: [{ type: i0.ViewChild, args: ['prefixEl', { isSignal: true }] }], errorAnimatable: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], warningAnimatable: [{ type: i0.ViewChild, args: ['warningAnimatable', { isSignal: true }] }], hintAnimatable: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
|
|
25069
25079
|
|
|
25070
25080
|
const INPUT_MASK_HOST = new InjectionToken('INPUT_MASK_HOST');
|
|
@@ -25797,7 +25807,7 @@ class ColorPickerAreaDirective {
|
|
|
25797
25807
|
this.colorInput?.picker.setSaturationAndValue(saturation, brightness);
|
|
25798
25808
|
}
|
|
25799
25809
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
25800
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ColorPickerAreaDirective, isStandalone: true, selector: "[etColorPickerArea]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "style.--_et-color-picker-area-hue": "hueColor()" },
|
|
25810
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ColorPickerAreaDirective, isStandalone: true, selector: "[etColorPickerArea]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "style.touch-action": "\"none\"", "style.--_et-color-picker-area-hue": "hueColor()" }, classAttribute: "et-color-picker-area" }, exportAs: ["etColorPickerArea"], ngImport: i0 }); }
|
|
25801
25811
|
}
|
|
25802
25812
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerAreaDirective, decorators: [{
|
|
25803
25813
|
type: Directive,
|
|
@@ -25806,7 +25816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
25806
25816
|
exportAs: 'etColorPickerArea',
|
|
25807
25817
|
host: {
|
|
25808
25818
|
class: 'et-color-picker-area',
|
|
25809
|
-
style
|
|
25819
|
+
'[style.touch-action]': '"none"',
|
|
25810
25820
|
'[style.--_et-color-picker-area-hue]': 'hueColor()',
|
|
25811
25821
|
'(pointerdown)': 'handlePointerDown($event)',
|
|
25812
25822
|
},
|
|
@@ -32142,9 +32152,28 @@ const DROPZONE_ENTRY_STATUSES = {
|
|
|
32142
32152
|
ERROR: 'error',
|
|
32143
32153
|
EXISTING: 'existing',
|
|
32144
32154
|
};
|
|
32155
|
+
/** A `data:` URL rather than an object URL: a strict `img-src` rarely allows `blob:`. */
|
|
32156
|
+
const readImagePreview = (file) => {
|
|
32157
|
+
const url = signal(null, /* @ts-ignore */
|
|
32158
|
+
...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
|
|
32159
|
+
if (typeof FileReader === 'undefined')
|
|
32160
|
+
return { url: url.asReadonly(), dispose: () => undefined };
|
|
32161
|
+
const reader = new FileReader();
|
|
32162
|
+
reader.onload = () => url.set(typeof reader.result === 'string' ? reader.result : null);
|
|
32163
|
+
reader.readAsDataURL(file);
|
|
32164
|
+
return {
|
|
32165
|
+
url: url.asReadonly(),
|
|
32166
|
+
dispose: () => {
|
|
32167
|
+
reader.onload = null;
|
|
32168
|
+
if (reader.readyState === FileReader.LOADING)
|
|
32169
|
+
reader.abort();
|
|
32170
|
+
url.set(null);
|
|
32171
|
+
},
|
|
32172
|
+
};
|
|
32173
|
+
};
|
|
32145
32174
|
const createFileDropzoneEntry = (options) => {
|
|
32146
32175
|
const { file, handle } = options;
|
|
32147
|
-
const
|
|
32176
|
+
const preview = file.type.startsWith('image/') ? readImagePreview(file) : null;
|
|
32148
32177
|
const status = computed(() => {
|
|
32149
32178
|
switch (handle.state()) {
|
|
32150
32179
|
case 'success':
|
|
@@ -32161,14 +32190,14 @@ const createFileDropzoneEntry = (options) => {
|
|
|
32161
32190
|
source: { type: 'file', file },
|
|
32162
32191
|
name: computed(() => file.name),
|
|
32163
32192
|
size: computed(() => file.size),
|
|
32164
|
-
previewUrl: computed(() =>
|
|
32193
|
+
previewUrl: preview?.url ?? computed(() => null),
|
|
32165
32194
|
status,
|
|
32166
32195
|
progress: handle.progress,
|
|
32167
32196
|
error: handle.error,
|
|
32168
32197
|
errorMessage: handle.errorMessage,
|
|
32169
32198
|
value: handle.value,
|
|
32170
32199
|
handle,
|
|
32171
|
-
|
|
32200
|
+
disposePreview: preview?.dispose ?? null,
|
|
32172
32201
|
};
|
|
32173
32202
|
};
|
|
32174
32203
|
const createExistingDropzoneEntry = (options) => {
|
|
@@ -32187,12 +32216,12 @@ const createExistingDropzoneEntry = (options) => {
|
|
|
32187
32216
|
errorMessage: computed(() => null),
|
|
32188
32217
|
value: computed(() => value),
|
|
32189
32218
|
handle: null,
|
|
32190
|
-
|
|
32219
|
+
disposePreview: null,
|
|
32191
32220
|
};
|
|
32192
32221
|
};
|
|
32193
|
-
/** Releases all resources held by an entry (
|
|
32222
|
+
/** Releases all resources held by an entry (preview read, in-flight upload). */
|
|
32194
32223
|
const disposeDropzoneEntry = (entry) => {
|
|
32195
|
-
entry.
|
|
32224
|
+
entry.disposePreview?.();
|
|
32196
32225
|
entry.handle?.dispose();
|
|
32197
32226
|
};
|
|
32198
32227
|
/** Checks a file against the native `accept` attribute semantics (`.ext`, `type/subtype`, `type/*`). */
|
|
@@ -33075,9 +33104,7 @@ const createNewQueryDeleteExecutor = (config) => {
|
|
|
33075
33104
|
const { value, injector } = options;
|
|
33076
33105
|
const query = queryCreator({ injector, silenceMissingWithArgsFeatureError: true });
|
|
33077
33106
|
const args = createArgs(value);
|
|
33078
|
-
return executeUntilSettled(query, { args })
|
|
33079
|
-
.then((snapshot) => snapshot.error())
|
|
33080
|
-
.finally(() => query.subtle.destroy());
|
|
33107
|
+
return firstValueFrom(executeUntilSettled$(query, { args }).pipe(map((snapshot) => snapshot.error()), finalize(() => query.subtle.destroy())));
|
|
33081
33108
|
};
|
|
33082
33109
|
};
|
|
33083
33110
|
const createV2QueryDeleteExecutor = (config) => {
|
|
@@ -34070,6 +34097,9 @@ const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6';
|
|
|
34070
34097
|
/** Must list only block-level containers: an inline element re-tagged in place loses its mark, so a
|
|
34071
34098
|
* bare `<strong>` under the root has to be wrapped by the heading rather than turned into one. */
|
|
34072
34099
|
const BLOCK_SELECTOR = 'p, div, blockquote, pre, li, figure, section, article';
|
|
34100
|
+
/** Alignment persists as a class, not an inline `text-align`, so rendered content passes a strict `style-src`. */
|
|
34101
|
+
const ALIGN_CLASS_PREFIX = 'et-rte-align-';
|
|
34102
|
+
const alignClassOf = (el) => [...el.classList].find((cls) => cls.startsWith(ALIGN_CLASS_PREFIX)) ?? null;
|
|
34073
34103
|
const createRichTextEditorDomCore = (doc, renderer) => {
|
|
34074
34104
|
const root = signal(null, /* @ts-ignore */
|
|
34075
34105
|
...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
|
|
@@ -35489,6 +35519,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
35489
35519
|
}] });
|
|
35490
35520
|
|
|
35491
35521
|
const EMPTY_INLINE_SWEEP_SELECTOR = /* @__PURE__ */ [...INLINE_TAGS, 'a'].join(', ');
|
|
35522
|
+
const INERT_STYLE_ATTRIBUTE = 'data-et-paste-style';
|
|
35523
|
+
const HTML_START_TAG = /<[a-z][^\s/>]*(?:\s+[^\s/>=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)*\s*\/?>/gi;
|
|
35524
|
+
const HTML_ATTRIBUTE = /(\s+)([^\s/>=]+)((?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)/g;
|
|
35525
|
+
const renameStyleAttribute = (attribute, ...[space, name, value]) => name?.toLowerCase() === 'style' ? `${space}${INERT_STYLE_ATTRIBUTE}${value}` : attribute;
|
|
35526
|
+
const renameStyleAttributes = (html) => html.replace(HTML_START_TAG, (tag) => tag.replace(HTML_ATTRIBUTE, renameStyleAttribute));
|
|
35527
|
+
const restoreStyleAttributes = (html) => html.replaceAll(` ${INERT_STYLE_ATTRIBUTE}="`, ' style="');
|
|
35492
35528
|
/** Every call must sit inside an `ngDevMode` branch - that is what keeps these strings out of a production bundle. */
|
|
35493
35529
|
const missingDomFeature = (method, provider) => new RuntimeError(RICH_TEXT_EDITOR_ERROR_CODES.DOM_FEATURE_NOT_PROVIDED, `${method} requires ${provider}(). Add it to a component or route's providers so this editor has the DOM operations it drives.`);
|
|
35494
35530
|
class RichTextEditorDirective extends AccessibleNameControlDirective {
|
|
@@ -35905,14 +35941,14 @@ class RichTextEditorDirective extends AccessibleNameControlDirective {
|
|
|
35905
35941
|
if (this.disabled() || this.readonly() || !this.editorDom.root())
|
|
35906
35942
|
return false;
|
|
35907
35943
|
this.clearPendingMarks();
|
|
35908
|
-
//
|
|
35909
|
-
//
|
|
35910
|
-
const body = new DOMParser().parseFromString(html, 'text/html').body;
|
|
35944
|
+
// Chromium checks style-src-attr for every parsed style attribute, even in a DOMParser,
|
|
35945
|
+
// createHTMLDocument or <template> document, so the attribute is renamed before parsing.
|
|
35946
|
+
const body = new DOMParser().parseFromString(renameStyleAttributes(html), 'text/html').body;
|
|
35911
35947
|
// eslint-disable-next-line ethlete/no-dom-query -- clipboard HTML (e.g. from Word) embeds <style> blocks whose CSS text would survive the tag-strip as plain text
|
|
35912
35948
|
body.querySelectorAll('style, script, noscript, meta, link, title').forEach((junk) => junk.remove());
|
|
35913
35949
|
const codec = this.tokenCodec();
|
|
35914
35950
|
codec?.serialize(body);
|
|
35915
|
-
const markdown = this.parseTokenText(htmlToMarkdown(body.innerHTML));
|
|
35951
|
+
const markdown = this.parseTokenText(htmlToMarkdown(restoreStyleAttributes(body.innerHTML)));
|
|
35916
35952
|
if (!markdown)
|
|
35917
35953
|
return false;
|
|
35918
35954
|
const normalized = markdownToHtml(markdown);
|
|
@@ -39076,7 +39112,7 @@ const MENU_SEARCH_IMPORTS = [MenuSearchDirective];
|
|
|
39076
39112
|
const TEXT_ALIGNS = ['left', 'center', 'right', 'justify'];
|
|
39077
39113
|
/**
|
|
39078
39114
|
* The opt-in alignment tool's toolbar control: a menu of block alignments (left/center/right/justify).
|
|
39079
|
-
* Alignment has no Markdown form, so it is persisted as
|
|
39115
|
+
* Alignment has no Markdown form, so it is persisted as an `et-rte-align-*` class on the block (or
|
|
39080
39116
|
* table cell) and round-tripped as raw HTML by the Markdown converter. Registered via
|
|
39081
39117
|
* `provideRichTextEditorAlignmentTool`.
|
|
39082
39118
|
*/
|
|
@@ -39128,10 +39164,11 @@ class RichTextEditorAlignToolComponent {
|
|
|
39128
39164
|
// explicit align action) - never in readAlign, which runs on every selection change
|
|
39129
39165
|
const blocks = this.targetBlocks(root, range) ?? this.wrapLooseContent(root, range);
|
|
39130
39166
|
for (const block of blocks) {
|
|
39131
|
-
|
|
39132
|
-
|
|
39133
|
-
|
|
39134
|
-
|
|
39167
|
+
const current = alignClassOf(block);
|
|
39168
|
+
if (current)
|
|
39169
|
+
this.renderer.removeClass(block, current);
|
|
39170
|
+
if (align !== 'left')
|
|
39171
|
+
this.renderer.addClass(block, `${ALIGN_CLASS_PREFIX}${align}`);
|
|
39135
39172
|
}
|
|
39136
39173
|
this.current.set(align);
|
|
39137
39174
|
this.editor().syncFromDom({ boundary: true });
|
|
@@ -39142,7 +39179,8 @@ class RichTextEditorAlignToolComponent {
|
|
|
39142
39179
|
const range = this.editor().editorDom.getSelection()?.range;
|
|
39143
39180
|
if (!root || !range)
|
|
39144
39181
|
return 'left';
|
|
39145
|
-
const
|
|
39182
|
+
const block = this.targetBlocks(root, range)?.[0];
|
|
39183
|
+
const value = (block && alignClassOf(block)?.slice(ALIGN_CLASS_PREFIX.length)) ?? '';
|
|
39146
39184
|
return TEXT_ALIGNS.includes(value) ? value : 'left';
|
|
39147
39185
|
}
|
|
39148
39186
|
/**
|
|
@@ -39209,7 +39247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
39209
39247
|
/**
|
|
39210
39248
|
* Registers the opt-in `'align'` tool (block text-align: left / center / right / justify). Add to a
|
|
39211
39249
|
* component/route's providers and include `'align'` in the editor's `tools`. Alignment persists as a
|
|
39212
|
-
*
|
|
39250
|
+
* `et-rte-align-*` class on the block (Markdown has no alignment syntax). Tree-shakes when unused.
|
|
39213
39251
|
*/
|
|
39214
39252
|
const provideRichTextEditorAlignmentTool = () => ({
|
|
39215
39253
|
provide: RICH_TEXT_EDITOR_TOOL,
|
|
@@ -39835,10 +39873,10 @@ const createRichTextEditorHeadings = (core) => {
|
|
|
39835
39873
|
const { doc, renderer, root, getSelection, closestWithin, selectNodeContents, selectAcross, collapseInto, replaceWith, blocksInRange, isBlockEmpty, } = core;
|
|
39836
39874
|
const replaceBlockTag = (block, tag) => {
|
|
39837
39875
|
const replacement = renderer.createElement(tag);
|
|
39838
|
-
|
|
39839
|
-
|
|
39840
|
-
|
|
39841
|
-
|
|
39876
|
+
const align = alignClassOf(block);
|
|
39877
|
+
// Alignment is the one presentation the editor persists on blocks, so it has to survive the re-tag.
|
|
39878
|
+
if (align)
|
|
39879
|
+
renderer.addClass(replacement, align);
|
|
39842
39880
|
while (block.firstChild) {
|
|
39843
39881
|
renderer.appendChild(replacement, block.firstChild);
|
|
39844
39882
|
}
|
|
@@ -41676,11 +41714,11 @@ const TOOLBAR_IMPORTS = [ToolbarComponent, ToolbarDirective];
|
|
|
41676
41714
|
*/
|
|
41677
41715
|
class RichTextContentStylesComponent {
|
|
41678
41716
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RichTextContentStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
41679
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RichTextContentStylesComponent, isStandalone: true, selector: "et-rich-text-content-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
41717
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RichTextContentStylesComponent, isStandalone: true, selector: "et-rich-text-content-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}.et-rte-content .et-rte-align-left{text-align:left}.et-rte-content .et-rte-align-center{text-align:center}.et-rte-content .et-rte-align-right{text-align:right}.et-rte-content .et-rte-align-justify{text-align:justify}.et-rte-content .et-rte-align-start{text-align:start}.et-rte-content .et-rte-align-end{text-align:end}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
41680
41718
|
}
|
|
41681
41719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RichTextContentStylesComponent, decorators: [{
|
|
41682
41720
|
type: Component,
|
|
41683
|
-
args: [{ selector: 'et-rich-text-content-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"] }]
|
|
41721
|
+
args: [{ selector: 'et-rich-text-content-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}.et-rte-content .et-rte-align-left{text-align:left}.et-rte-content .et-rte-align-center{text-align:center}.et-rte-content .et-rte-align-right{text-align:right}.et-rte-content .et-rte-align-justify{text-align:justify}.et-rte-content .et-rte-align-start{text-align:start}.et-rte-content .et-rte-align-end{text-align:end}}\n"] }]
|
|
41684
41722
|
}] });
|
|
41685
41723
|
/** @internal */
|
|
41686
41724
|
const mountRichTextContentStyles = () => injectStyleManager().mount(RichTextContentStylesComponent);
|
|
@@ -50904,70 +50942,59 @@ class GridDebugComponent {
|
|
|
50904
50942
|
}
|
|
50905
50943
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GridDebugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50906
50944
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: GridDebugComponent, isStandalone: true, selector: "et-grid-debug", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, externalItems: { classPropertyName: "externalItems", publicName: "externalItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
50907
|
-
<details
|
|
50908
|
-
|
|
50909
|
-
|
|
50910
|
-
<summary
|
|
50911
|
-
style="padding: 6px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; user-select: none"
|
|
50912
|
-
>
|
|
50913
|
-
<span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
|
|
50945
|
+
<details class="et-grid-debug-panel">
|
|
50946
|
+
<summary class="et-grid-debug-summary">
|
|
50947
|
+
<span class="et-grid-debug-title">et-grid-debug</span>
|
|
50914
50948
|
|
|
50915
|
-
<span
|
|
50916
|
-
bp: <strong
|
|
50917
|
-
· {{ items().length }} items
|
|
50949
|
+
<span class="et-grid-debug-muted">
|
|
50950
|
+
bp: <strong class="et-grid-debug-strong">{{ activeBreakpoint() }}</strong> ·
|
|
50951
|
+
{{ containerWidth() }}px · {{ items().length }} items
|
|
50918
50952
|
@if (hasDrag()) {
|
|
50919
|
-
· <span
|
|
50953
|
+
· <span class="et-grid-debug-warning">⠿ dragging</span>
|
|
50920
50954
|
}
|
|
50921
50955
|
</span>
|
|
50922
50956
|
|
|
50923
50957
|
@if (issueCount() > 0) {
|
|
50924
|
-
<span
|
|
50925
|
-
>⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
|
|
50926
|
-
>
|
|
50958
|
+
<span class="et-grid-debug-issues">⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span>
|
|
50927
50959
|
}
|
|
50928
50960
|
|
|
50929
|
-
<button
|
|
50930
|
-
(click)="copyJson($event)"
|
|
50931
|
-
style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
|
|
50932
|
-
>
|
|
50933
|
-
Copy JSON
|
|
50934
|
-
</button>
|
|
50961
|
+
<button (click)="copyJson($event)" class="et-grid-debug-copy">Copy JSON</button>
|
|
50935
50962
|
|
|
50936
50963
|
@if (copied()) {
|
|
50937
|
-
<span
|
|
50964
|
+
<span class="et-grid-debug-copied">✓ copied</span>
|
|
50938
50965
|
}
|
|
50939
50966
|
</summary>
|
|
50940
50967
|
|
|
50941
|
-
<div
|
|
50968
|
+
<div class="et-grid-debug-body">
|
|
50942
50969
|
<!-- Breakpoint legend -->
|
|
50943
|
-
<div
|
|
50970
|
+
<div class="et-grid-debug-legend">
|
|
50944
50971
|
@for (bp of breakpoints(); track bp.name) {
|
|
50945
50972
|
<span
|
|
50946
50973
|
[style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
|
|
50947
50974
|
[style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
|
|
50948
|
-
|
|
50975
|
+
class="et-grid-debug-breakpoint"
|
|
50949
50976
|
>{{ bp.name }} {{ bp.columns }}col ≥{{ bp.minWidth }}px</span
|
|
50950
50977
|
>
|
|
50951
50978
|
}
|
|
50952
50979
|
</div>
|
|
50953
50980
|
|
|
50954
50981
|
<!-- Layout table -->
|
|
50955
|
-
<table
|
|
50982
|
+
<table class="et-grid-debug-table">
|
|
50956
50983
|
<thead>
|
|
50957
|
-
<tr
|
|
50958
|
-
<th
|
|
50959
|
-
<th
|
|
50984
|
+
<tr class="et-grid-debug-head-row">
|
|
50985
|
+
<th class="et-grid-debug-cell et-grid-debug-cell-start">id</th>
|
|
50986
|
+
<th class="et-grid-debug-cell et-grid-debug-cell-start">type</th>
|
|
50960
50987
|
@for (bp of breakpoints(); track bp.name) {
|
|
50961
50988
|
<th
|
|
50962
50989
|
[style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
|
|
50963
|
-
|
|
50990
|
+
class="et-grid-debug-cell"
|
|
50964
50991
|
>
|
|
50965
50992
|
{{ bp.name }}{{ hasExternal() ? ' int' : '' }}
|
|
50966
50993
|
</th>
|
|
50967
50994
|
@if (hasExternal()) {
|
|
50968
50995
|
<th
|
|
50969
50996
|
[style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
|
|
50970
|
-
|
|
50997
|
+
class="et-grid-debug-cell et-grid-debug-cell-ext"
|
|
50971
50998
|
>
|
|
50972
50999
|
{{ bp.name }} ext
|
|
50973
51000
|
</th>
|
|
@@ -50978,13 +51005,13 @@ class GridDebugComponent {
|
|
|
50978
51005
|
<tbody>
|
|
50979
51006
|
@for (row of rows(); track row.id) {
|
|
50980
51007
|
<tr>
|
|
50981
|
-
<td
|
|
50982
|
-
<td
|
|
51008
|
+
<td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-id">{{ row.id }}</td>
|
|
51009
|
+
<td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-type">{{ row.type }}</td>
|
|
50983
51010
|
@for (cell of row.cells; track cell.bp) {
|
|
50984
51011
|
<td
|
|
50985
51012
|
[style.color]="cell.intMissing ? '#dc2626' : '#111'"
|
|
50986
51013
|
[title]="cell.intMissing ? 'MISSING - layout.' + cell.bp + ' undefined in internal state' : ''"
|
|
50987
|
-
|
|
51014
|
+
class="et-grid-debug-cell"
|
|
50988
51015
|
>
|
|
50989
51016
|
{{ fmtPos(cell.int) }}
|
|
50990
51017
|
</td>
|
|
@@ -50992,7 +51019,7 @@ class GridDebugComponent {
|
|
|
50992
51019
|
<td
|
|
50993
51020
|
[style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
|
|
50994
51021
|
[title]="cell.mismatch ? 'MISMATCH - ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
|
|
50995
|
-
|
|
51022
|
+
class="et-grid-debug-cell"
|
|
50996
51023
|
>
|
|
50997
51024
|
{{ fmtPos(cell.ext) }}
|
|
50998
51025
|
</td>
|
|
@@ -51004,85 +51031,72 @@ class GridDebugComponent {
|
|
|
51004
51031
|
</table>
|
|
51005
51032
|
|
|
51006
51033
|
@if (hasExternal()) {
|
|
51007
|
-
<p
|
|
51034
|
+
<p class="et-grid-debug-note">
|
|
51008
51035
|
int = grid.currentItems() (internal) · ext = externalItems input ·
|
|
51009
|
-
<span
|
|
51010
|
-
<span
|
|
51036
|
+
<span class="et-grid-debug-error">red = undefined</span> ·
|
|
51037
|
+
<span class="et-grid-debug-warning">orange = mismatch</span>
|
|
51011
51038
|
</p>
|
|
51012
51039
|
}
|
|
51013
51040
|
</div>
|
|
51014
51041
|
</details>
|
|
51015
|
-
`, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
51042
|
+
`, isInline: true, styles: ["@layer components{.et-grid-debug-panel{font-family:monospace;font-size:11px;border:1px solid #d1d5db;border-radius:4px;margin-top:8px;background:#f9fafb;color:#111}.et-grid-debug-summary{padding:6px 10px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none}.et-grid-debug-title{font-weight:700;color:#6b7280}.et-grid-debug-muted{color:#6b7280}.et-grid-debug-strong{color:#111827}.et-grid-debug-warning{color:#d97706}.et-grid-debug-error{color:#dc2626}.et-grid-debug-issues{color:#dc2626;font-weight:700}.et-grid-debug-copy{margin-left:auto;padding:2px 8px;border:1px solid #d1d5db;border-radius:3px;background:#fff;cursor:pointer;font-size:11px;color:#374151}.et-grid-debug-copied{color:#16a34a;font-size:10px}.et-grid-debug-body{padding:8px 10px;overflow-x:auto;border-top:1px solid #e5e7eb}.et-grid-debug-legend{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.et-grid-debug-breakpoint{padding:1px 7px;border:1px solid currentColor;border-radius:99px}.et-grid-debug-table{border-collapse:collapse;white-space:nowrap}.et-grid-debug-head-row{background:#f3f4f6}.et-grid-debug-cell{padding:3px 8px;border:1px solid #e5e7eb;text-align:center}.et-grid-debug-cell-start{text-align:left}.et-grid-debug-cell-ext{opacity:.65}.et-grid-debug-id{color:#6b7280}.et-grid-debug-type{color:#9ca3af}.et-grid-debug-note{margin-top:6px;color:#9ca3af;font-size:10px}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
51016
51043
|
}
|
|
51017
51044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GridDebugComponent, decorators: [{
|
|
51018
51045
|
type: Component,
|
|
51019
|
-
args: [{
|
|
51020
|
-
|
|
51021
|
-
|
|
51022
|
-
|
|
51023
|
-
|
|
51024
|
-
|
|
51025
|
-
|
|
51026
|
-
|
|
51027
|
-
>
|
|
51028
|
-
<span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
|
|
51029
|
-
|
|
51030
|
-
<span style="color: #6b7280">
|
|
51031
|
-
bp: <strong style="color: #111827">{{ activeBreakpoint() }}</strong> · {{ containerWidth() }}px
|
|
51032
|
-
· {{ items().length }} items
|
|
51046
|
+
args: [{ selector: 'et-grid-debug', template: `
|
|
51047
|
+
<details class="et-grid-debug-panel">
|
|
51048
|
+
<summary class="et-grid-debug-summary">
|
|
51049
|
+
<span class="et-grid-debug-title">et-grid-debug</span>
|
|
51050
|
+
|
|
51051
|
+
<span class="et-grid-debug-muted">
|
|
51052
|
+
bp: <strong class="et-grid-debug-strong">{{ activeBreakpoint() }}</strong> ·
|
|
51053
|
+
{{ containerWidth() }}px · {{ items().length }} items
|
|
51033
51054
|
@if (hasDrag()) {
|
|
51034
|
-
· <span
|
|
51055
|
+
· <span class="et-grid-debug-warning">⠿ dragging</span>
|
|
51035
51056
|
}
|
|
51036
51057
|
</span>
|
|
51037
51058
|
|
|
51038
51059
|
@if (issueCount() > 0) {
|
|
51039
|
-
<span
|
|
51040
|
-
>⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
|
|
51041
|
-
>
|
|
51060
|
+
<span class="et-grid-debug-issues">⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span>
|
|
51042
51061
|
}
|
|
51043
51062
|
|
|
51044
|
-
<button
|
|
51045
|
-
(click)="copyJson($event)"
|
|
51046
|
-
style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
|
|
51047
|
-
>
|
|
51048
|
-
Copy JSON
|
|
51049
|
-
</button>
|
|
51063
|
+
<button (click)="copyJson($event)" class="et-grid-debug-copy">Copy JSON</button>
|
|
51050
51064
|
|
|
51051
51065
|
@if (copied()) {
|
|
51052
|
-
<span
|
|
51066
|
+
<span class="et-grid-debug-copied">✓ copied</span>
|
|
51053
51067
|
}
|
|
51054
51068
|
</summary>
|
|
51055
51069
|
|
|
51056
|
-
<div
|
|
51070
|
+
<div class="et-grid-debug-body">
|
|
51057
51071
|
<!-- Breakpoint legend -->
|
|
51058
|
-
<div
|
|
51072
|
+
<div class="et-grid-debug-legend">
|
|
51059
51073
|
@for (bp of breakpoints(); track bp.name) {
|
|
51060
51074
|
<span
|
|
51061
51075
|
[style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
|
|
51062
51076
|
[style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
|
|
51063
|
-
|
|
51077
|
+
class="et-grid-debug-breakpoint"
|
|
51064
51078
|
>{{ bp.name }} {{ bp.columns }}col ≥{{ bp.minWidth }}px</span
|
|
51065
51079
|
>
|
|
51066
51080
|
}
|
|
51067
51081
|
</div>
|
|
51068
51082
|
|
|
51069
51083
|
<!-- Layout table -->
|
|
51070
|
-
<table
|
|
51084
|
+
<table class="et-grid-debug-table">
|
|
51071
51085
|
<thead>
|
|
51072
|
-
<tr
|
|
51073
|
-
<th
|
|
51074
|
-
<th
|
|
51086
|
+
<tr class="et-grid-debug-head-row">
|
|
51087
|
+
<th class="et-grid-debug-cell et-grid-debug-cell-start">id</th>
|
|
51088
|
+
<th class="et-grid-debug-cell et-grid-debug-cell-start">type</th>
|
|
51075
51089
|
@for (bp of breakpoints(); track bp.name) {
|
|
51076
51090
|
<th
|
|
51077
51091
|
[style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
|
|
51078
|
-
|
|
51092
|
+
class="et-grid-debug-cell"
|
|
51079
51093
|
>
|
|
51080
51094
|
{{ bp.name }}{{ hasExternal() ? ' int' : '' }}
|
|
51081
51095
|
</th>
|
|
51082
51096
|
@if (hasExternal()) {
|
|
51083
51097
|
<th
|
|
51084
51098
|
[style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
|
|
51085
|
-
|
|
51099
|
+
class="et-grid-debug-cell et-grid-debug-cell-ext"
|
|
51086
51100
|
>
|
|
51087
51101
|
{{ bp.name }} ext
|
|
51088
51102
|
</th>
|
|
@@ -51093,13 +51107,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
51093
51107
|
<tbody>
|
|
51094
51108
|
@for (row of rows(); track row.id) {
|
|
51095
51109
|
<tr>
|
|
51096
|
-
<td
|
|
51097
|
-
<td
|
|
51110
|
+
<td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-id">{{ row.id }}</td>
|
|
51111
|
+
<td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-type">{{ row.type }}</td>
|
|
51098
51112
|
@for (cell of row.cells; track cell.bp) {
|
|
51099
51113
|
<td
|
|
51100
51114
|
[style.color]="cell.intMissing ? '#dc2626' : '#111'"
|
|
51101
51115
|
[title]="cell.intMissing ? 'MISSING - layout.' + cell.bp + ' undefined in internal state' : ''"
|
|
51102
|
-
|
|
51116
|
+
class="et-grid-debug-cell"
|
|
51103
51117
|
>
|
|
51104
51118
|
{{ fmtPos(cell.int) }}
|
|
51105
51119
|
</td>
|
|
@@ -51107,7 +51121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
51107
51121
|
<td
|
|
51108
51122
|
[style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
|
|
51109
51123
|
[title]="cell.mismatch ? 'MISMATCH - ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
|
|
51110
|
-
|
|
51124
|
+
class="et-grid-debug-cell"
|
|
51111
51125
|
>
|
|
51112
51126
|
{{ fmtPos(cell.ext) }}
|
|
51113
51127
|
</td>
|
|
@@ -51119,17 +51133,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
51119
51133
|
</table>
|
|
51120
51134
|
|
|
51121
51135
|
@if (hasExternal()) {
|
|
51122
|
-
<p
|
|
51136
|
+
<p class="et-grid-debug-note">
|
|
51123
51137
|
int = grid.currentItems() (internal) · ext = externalItems input ·
|
|
51124
|
-
<span
|
|
51125
|
-
<span
|
|
51138
|
+
<span class="et-grid-debug-error">red = undefined</span> ·
|
|
51139
|
+
<span class="et-grid-debug-warning">orange = mismatch</span>
|
|
51126
51140
|
</p>
|
|
51127
51141
|
}
|
|
51128
51142
|
</div>
|
|
51129
51143
|
</details>
|
|
51130
|
-
`,
|
|
51131
|
-
encapsulation: ViewEncapsulation.None,
|
|
51132
|
-
}]
|
|
51144
|
+
`, encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-grid-debug-panel{font-family:monospace;font-size:11px;border:1px solid #d1d5db;border-radius:4px;margin-top:8px;background:#f9fafb;color:#111}.et-grid-debug-summary{padding:6px 10px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none}.et-grid-debug-title{font-weight:700;color:#6b7280}.et-grid-debug-muted{color:#6b7280}.et-grid-debug-strong{color:#111827}.et-grid-debug-warning{color:#d97706}.et-grid-debug-error{color:#dc2626}.et-grid-debug-issues{color:#dc2626;font-weight:700}.et-grid-debug-copy{margin-left:auto;padding:2px 8px;border:1px solid #d1d5db;border-radius:3px;background:#fff;cursor:pointer;font-size:11px;color:#374151}.et-grid-debug-copied{color:#16a34a;font-size:10px}.et-grid-debug-body{padding:8px 10px;overflow-x:auto;border-top:1px solid #e5e7eb}.et-grid-debug-legend{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.et-grid-debug-breakpoint{padding:1px 7px;border:1px solid currentColor;border-radius:99px}.et-grid-debug-table{border-collapse:collapse;white-space:nowrap}.et-grid-debug-head-row{background:#f3f4f6}.et-grid-debug-cell{padding:3px 8px;border:1px solid #e5e7eb;text-align:center}.et-grid-debug-cell-start{text-align:left}.et-grid-debug-cell-ext{opacity:.65}.et-grid-debug-id{color:#6b7280}.et-grid-debug-type{color:#9ca3af}.et-grid-debug-note{margin-top:6px;color:#9ca3af;font-size:10px}}\n"] }]
|
|
51133
51145
|
}], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: true }] }], externalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalItems", required: false }] }] } });
|
|
51134
51146
|
|
|
51135
51147
|
/** The grid, its items, the item toolbar and the default item actions. */
|
|
@@ -53070,6 +53082,8 @@ class PaginationComponent {
|
|
|
53070
53082
|
this.jumpInputId = createComponentId('et-pagination-jump-input');
|
|
53071
53083
|
// Re-fit the page window whenever the paginator's own width changes (viewport resize, footer layout).
|
|
53072
53084
|
this.hostDimensions = signalHostElementDimensions();
|
|
53085
|
+
this.fitsWidth = computed(() => this.responsive() && this.compact() !== true, /* @ts-ignore */
|
|
53086
|
+
...(ngDevMode ? [{ debugName: "fitsWidth" }] : /* istanbul ignore next */ []));
|
|
53073
53087
|
/** The `[start, end]` (1-based, inclusive) item range shown on the current page, or `null` if unknown. */
|
|
53074
53088
|
this.range = computed(() => {
|
|
53075
53089
|
const size = this.pageSize();
|
|
@@ -53250,7 +53264,7 @@ class PaginationComponent {
|
|
|
53250
53264
|
return attempts;
|
|
53251
53265
|
}
|
|
53252
53266
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
53253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PaginationComponent, isStandalone: true, selector: "et-pagination", inputs: { renderAs: { classPropertyName: "renderAs", publicName: "renderAs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, urlForPage: { classPropertyName: "urlForPage", publicName: "urlForPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showJumpTo: { classPropertyName: "showJumpTo", publicName: "showJumpTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-compact": "isCompact() ? \"\" : null" }, classAttribute: "et-pagination-host" }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["paginationList"], descendants: true, isSignal: true }, { propertyName: "itemEls", predicate: ["paginationItem"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PaginationDirective, inputs: ["page", "page", "totalPages", "totalPages", "siblingCount", "siblingCount", "boundaryCount", "boundaryCount", "hideFirstLast", "hideFirstLast", "hidePreviousNext", "hidePreviousNext", "ariaLabel", "ariaLabel", "labels", "labels"], outputs: ["pageChange", "pageChange"] }], ngImport: i0, template: "@if (!isCompact() && rangeStatus(); as status) {\n <p class=\"et-pagination-range\" aria-live=\"polite\">\n <!-- Invisible width floor; see widestRangeStatus. Stacked with the live text in one grid cell. -->\n <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestRangeStatus() }}</span>\n <span class=\"et-pagination-readout-text\">{{ status }}</span>\n </p>\n}\n\n<ul #paginationList class=\"et-pagination-list\">\n @if (isCompact()) {\n <!-- Compact pager: the readout, then previous/next \u2014 readout first so a changing digit count grows\n leftward and the chevrons hold their place across page changes. -->\n <li class=\"et-pagination-status\" aria-live=\"polite\">\n <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestCompactStatus() }}</span>\n <span class=\"et-pagination-readout-text\">{{ compactStatus() }}</span>\n </li>\n @if (compactControls().previous; as item) {\n <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n </li>\n }\n @if (compactControls().next; as item) {\n <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n </li>\n }\n } @else {\n @for (item of items(); track $index) {\n <li #paginationItem [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n @if (item.type === 'ellipsis') {\n <span class=\"et-pagination-ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n }\n </li>\n }\n }\n</ul>\n\n<ng-template #control let-item>\n @if (hrefFor(item); as href) {\n <a\n [attr.href]=\"href\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n [attr.data-type]=\"item.type\"\n [variant]=\"item.current ? 'filled' : 'transparent'\"\n [color]=\"item.current ? 'inherit' : 'surface'\"\n [class.et-pagination-button--control]=\"item.type !== 'page'\"\n (click)=\"selectLink($event, item)\"\n class=\"et-pagination-button\"\n et-button\n size=\"sm\"\n >\n <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n </a>\n } @else {\n <button\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n [attr.data-type]=\"item.type\"\n [variant]=\"item.current ? 'filled' : 'transparent'\"\n [color]=\"item.current ? 'inherit' : 'surface'\"\n [disabled]=\"item.disabled\"\n [class.et-pagination-button--control]=\"item.type !== 'page'\"\n (click)=\"select(item)\"\n class=\"et-pagination-button\"\n et-button\n size=\"sm\"\n >\n <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n </button>\n }\n</ng-template>\n\n@if (showJumpTo()) {\n <div class=\"et-pagination-jump\">\n <label [attr.for]=\"jumpInputId\" class=\"et-pagination-jump-label\">\n {{ pagination.resolvedLabels().jumpTo }}\n </label>\n <input\n #jumpInput\n [min]=\"1\"\n [max]=\"pagination.totalPages()\"\n [id]=\"jumpInputId\"\n (keydown.enter)=\"jump(jumpInput.value); jumpInput.value = ''\"\n class=\"et-pagination-jump-input\"\n inputmode=\"numeric\"\n type=\"number\"\n />\n </div>\n}\n\n<ng-template #inner let-item>\n @switch (item.type) {\n @case ('first') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M11 3 6 8l5 5M5 3v10\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('previous') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M10 3 5 8l5 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('next') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M6 3l5 5-5 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('last') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M5 3l5 5-5 5M11 3v10\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @default {\n {{ item.page }}\n }\n }\n</ng-template>\n", styles: ["@layer components{@property --et-pagination-item-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pagination-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-pagination-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}:where(.et-pagination-host){display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap)}@media(pointer:coarse){:where(.et-pagination-host){--et-pagination-item-size: 44px}.et-pagination-host{isolation:isolate}.et-pagination-host .et-pagination-button:before{content:\"\";position:absolute;z-index:-1;top:50%;left:50%;inline-size:max(100%,44px);block-size:max(100%,44px);translate:-50% -50%}}.et-pagination-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap);margin:0;padding:0;list-style:none}.et-pagination-item{display:flex}.et-pagination-host .et-pagination-button{--et-button-padding: 0;--et-button-border-radius: var(--et-pagination-radius);padding-inline:4px;min-inline-size:var(--et-pagination-item-size);min-block-size:var(--et-pagination-item-size);font-variant-numeric:tabular-nums}.et-pagination-host .et-pagination-button--control{padding-inline:0;inline-size:var(--et-pagination-item-size)}.et-pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--et-pagination-item-size);block-size:var(--et-pagination-item-size);color:var(--et-surface-color-muted-solid, CanvasText);-webkit-user-select:none;user-select:none}.et-pagination-range{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-range,.et-pagination-status{display:inline-grid;grid-template-columns:auto;justify-items:center}.et-pagination-readout-sizer,.et-pagination-readout-text{grid-area:1 / 1;white-space:nowrap}.et-pagination-readout-sizer{visibility:hidden}.et-pagination-jump{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-jump-input{inline-size:64px;min-block-size:var(--et-pagination-item-size);padding-inline:8px;font:inherit;font-variant-numeric:tabular-nums;color:var(--et-surface-color-solid, CanvasText);background:transparent;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));border-radius:var(--et-pagination-radius)}.et-pagination-jump-input:where(:focus-visible){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-pagination-host:where([data-size=sm]){--et-pagination-item-size: 28px;--et-pagination-gap: 4px}.et-pagination-host:where([data-size=sm]) .et-pagination-button{--et-button-padding: 2px 0;font-size:13px}.et-pagination-host:where([data-compact]){--et-pagination-item-size: 34px;--et-pagination-gap: 2px}.et-pagination-status{align-items:center;min-block-size:var(--et-pagination-item-size);padding-inline:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--et-surface-color-muted-solid, CanvasText)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
53267
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: PaginationComponent, isStandalone: true, selector: "et-pagination", inputs: { renderAs: { classPropertyName: "renderAs", publicName: "renderAs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, urlForPage: { classPropertyName: "urlForPage", publicName: "urlForPage", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, showJumpTo: { classPropertyName: "showJumpTo", publicName: "showJumpTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-compact": "isCompact() ? \"\" : null", "attr.data-fit-width": "fitsWidth() ? \"\" : null" }, classAttribute: "et-pagination-host" }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["paginationList"], descendants: true, isSignal: true }, { propertyName: "itemEls", predicate: ["paginationItem"], descendants: true, isSignal: true }], hostDirectives: [{ directive: PaginationDirective, inputs: ["page", "page", "totalPages", "totalPages", "siblingCount", "siblingCount", "boundaryCount", "boundaryCount", "hideFirstLast", "hideFirstLast", "hidePreviousNext", "hidePreviousNext", "ariaLabel", "ariaLabel", "labels", "labels"], outputs: ["pageChange", "pageChange"] }], ngImport: i0, template: "@if (!isCompact() && rangeStatus(); as status) {\n <p class=\"et-pagination-range\" aria-live=\"polite\">\n <!-- Invisible width floor; see widestRangeStatus. Stacked with the live text in one grid cell. -->\n <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestRangeStatus() }}</span>\n <span class=\"et-pagination-readout-text\">{{ status }}</span>\n </p>\n}\n\n<ul #paginationList class=\"et-pagination-list\">\n @if (isCompact()) {\n <!-- Compact pager: the readout, then previous/next \u2014 readout first so a changing digit count grows\n leftward and the chevrons hold their place across page changes. -->\n <li class=\"et-pagination-status\" aria-live=\"polite\">\n <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestCompactStatus() }}</span>\n <span class=\"et-pagination-readout-text\">{{ compactStatus() }}</span>\n </li>\n @if (compactControls().previous; as item) {\n <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n </li>\n }\n @if (compactControls().next; as item) {\n <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n </li>\n }\n } @else {\n @for (item of items(); track $index) {\n <li #paginationItem [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n @if (item.type === 'ellipsis') {\n <span class=\"et-pagination-ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n }\n </li>\n }\n }\n</ul>\n\n<ng-template #control let-item>\n @if (hrefFor(item); as href) {\n <a\n [attr.href]=\"href\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n [attr.data-type]=\"item.type\"\n [variant]=\"item.current ? 'filled' : 'transparent'\"\n [color]=\"item.current ? 'inherit' : 'surface'\"\n [class.et-pagination-button--control]=\"item.type !== 'page'\"\n (click)=\"selectLink($event, item)\"\n class=\"et-pagination-button\"\n et-button\n size=\"sm\"\n >\n <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n </a>\n } @else {\n <button\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n [attr.data-type]=\"item.type\"\n [variant]=\"item.current ? 'filled' : 'transparent'\"\n [color]=\"item.current ? 'inherit' : 'surface'\"\n [disabled]=\"item.disabled\"\n [class.et-pagination-button--control]=\"item.type !== 'page'\"\n (click)=\"select(item)\"\n class=\"et-pagination-button\"\n et-button\n size=\"sm\"\n >\n <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n </button>\n }\n</ng-template>\n\n@if (showJumpTo()) {\n <div class=\"et-pagination-jump\">\n <label [attr.for]=\"jumpInputId\" class=\"et-pagination-jump-label\">\n {{ pagination.resolvedLabels().jumpTo }}\n </label>\n <input\n #jumpInput\n [min]=\"1\"\n [max]=\"pagination.totalPages()\"\n [id]=\"jumpInputId\"\n (keydown.enter)=\"jump(jumpInput.value); jumpInput.value = ''\"\n class=\"et-pagination-jump-input\"\n inputmode=\"numeric\"\n type=\"number\"\n />\n </div>\n}\n\n<ng-template #inner let-item>\n @switch (item.type) {\n @case ('first') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M11 3 6 8l5 5M5 3v10\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('previous') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M10 3 5 8l5 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('next') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M6 3l5 5-5 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('last') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M5 3l5 5-5 5M11 3v10\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @default {\n {{ item.page }}\n }\n }\n</ng-template>\n", styles: ["@layer components{@property --et-pagination-item-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pagination-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-pagination-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}:where(.et-pagination-host){display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap)}:where(.et-pagination-host[data-fit-width]){flex-grow:1}@media(pointer:coarse){:where(.et-pagination-host){--et-pagination-item-size: 44px}.et-pagination-host{isolation:isolate}.et-pagination-host .et-pagination-button:before{content:\"\";position:absolute;z-index:-1;top:50%;left:50%;inline-size:max(100%,44px);block-size:max(100%,44px);translate:-50% -50%}}.et-pagination-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap);margin:0;padding:0;list-style:none}.et-pagination-item{display:flex}.et-pagination-host .et-pagination-button{--et-button-padding: 0;--et-button-border-radius: var(--et-pagination-radius);padding-inline:4px;min-inline-size:var(--et-pagination-item-size);min-block-size:var(--et-pagination-item-size);font-variant-numeric:tabular-nums}.et-pagination-host .et-pagination-button--control{padding-inline:0;inline-size:var(--et-pagination-item-size)}.et-pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--et-pagination-item-size);block-size:var(--et-pagination-item-size);color:var(--et-surface-color-muted-solid, CanvasText);-webkit-user-select:none;user-select:none}.et-pagination-range{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-range,.et-pagination-status{display:inline-grid;grid-template-columns:auto;justify-items:center}.et-pagination-readout-sizer,.et-pagination-readout-text{grid-area:1 / 1;white-space:nowrap}.et-pagination-readout-sizer{visibility:hidden}.et-pagination-jump{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-jump-input{inline-size:64px;min-block-size:var(--et-pagination-item-size);padding-inline:8px;font:inherit;font-variant-numeric:tabular-nums;color:var(--et-surface-color-solid, CanvasText);background:transparent;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));border-radius:var(--et-pagination-radius)}.et-pagination-jump-input:where(:focus-visible){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-pagination-host:where([data-size=sm]){--et-pagination-item-size: 28px;--et-pagination-gap: 4px}.et-pagination-host:where([data-size=sm]) .et-pagination-button{--et-button-padding: 2px 0;font-size:13px}.et-pagination-host:where([data-compact]){--et-pagination-item-size: 34px;--et-pagination-gap: 2px}.et-pagination-status{align-items:center;min-block-size:var(--et-pagination-item-size);padding-inline:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--et-surface-color-muted-solid, CanvasText)}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
53254
53268
|
}
|
|
53255
53269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
53256
53270
|
type: Component,
|
|
@@ -53273,7 +53287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
53273
53287
|
class: 'et-pagination-host',
|
|
53274
53288
|
'[attr.data-size]': 'size()',
|
|
53275
53289
|
'[attr.data-compact]': 'isCompact() ? "" : null',
|
|
53276
|
-
|
|
53290
|
+
'[attr.data-fit-width]': 'fitsWidth() ? "" : null',
|
|
53291
|
+
}, template: "@if (!isCompact() && rangeStatus(); as status) {\n <p class=\"et-pagination-range\" aria-live=\"polite\">\n <!-- Invisible width floor; see widestRangeStatus. Stacked with the live text in one grid cell. -->\n <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestRangeStatus() }}</span>\n <span class=\"et-pagination-readout-text\">{{ status }}</span>\n </p>\n}\n\n<ul #paginationList class=\"et-pagination-list\">\n @if (isCompact()) {\n <!-- Compact pager: the readout, then previous/next \u2014 readout first so a changing digit count grows\n leftward and the chevrons hold their place across page changes. -->\n <li class=\"et-pagination-status\" aria-live=\"polite\">\n <span class=\"et-pagination-readout-sizer\" aria-hidden=\"true\">{{ widestCompactStatus() }}</span>\n <span class=\"et-pagination-readout-text\">{{ compactStatus() }}</span>\n </li>\n @if (compactControls().previous; as item) {\n <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n </li>\n }\n @if (compactControls().next; as item) {\n <li [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n </li>\n }\n } @else {\n @for (item of items(); track $index) {\n <li #paginationItem [attr.data-type]=\"item.type\" class=\"et-pagination-item\">\n @if (item.type === 'ellipsis') {\n <span class=\"et-pagination-ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <ng-container *ngTemplateOutlet=\"control; context: { $implicit: item }\" />\n }\n </li>\n }\n }\n</ul>\n\n<ng-template #control let-item>\n @if (hrefFor(item); as href) {\n <a\n [attr.href]=\"href\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n [attr.data-type]=\"item.type\"\n [variant]=\"item.current ? 'filled' : 'transparent'\"\n [color]=\"item.current ? 'inherit' : 'surface'\"\n [class.et-pagination-button--control]=\"item.type !== 'page'\"\n (click)=\"selectLink($event, item)\"\n class=\"et-pagination-button\"\n et-button\n size=\"sm\"\n >\n <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n </a>\n } @else {\n <button\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"item.current ? 'page' : null\"\n [attr.data-type]=\"item.type\"\n [variant]=\"item.current ? 'filled' : 'transparent'\"\n [color]=\"item.current ? 'inherit' : 'surface'\"\n [disabled]=\"item.disabled\"\n [class.et-pagination-button--control]=\"item.type !== 'page'\"\n (click)=\"select(item)\"\n class=\"et-pagination-button\"\n et-button\n size=\"sm\"\n >\n <ng-container *ngTemplateOutlet=\"inner; context: { $implicit: item }\" />\n </button>\n }\n</ng-template>\n\n@if (showJumpTo()) {\n <div class=\"et-pagination-jump\">\n <label [attr.for]=\"jumpInputId\" class=\"et-pagination-jump-label\">\n {{ pagination.resolvedLabels().jumpTo }}\n </label>\n <input\n #jumpInput\n [min]=\"1\"\n [max]=\"pagination.totalPages()\"\n [id]=\"jumpInputId\"\n (keydown.enter)=\"jump(jumpInput.value); jumpInput.value = ''\"\n class=\"et-pagination-jump-input\"\n inputmode=\"numeric\"\n type=\"number\"\n />\n </div>\n}\n\n<ng-template #inner let-item>\n @switch (item.type) {\n @case ('first') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M11 3 6 8l5 5M5 3v10\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('previous') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M10 3 5 8l5 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('next') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M6 3l5 5-5 5\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @case ('last') {\n <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M5 3l5 5-5 5M11 3v10\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n @default {\n {{ item.page }}\n }\n }\n</ng-template>\n", styles: ["@layer components{@property --et-pagination-item-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pagination-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-pagination-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}:where(.et-pagination-host){display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap)}:where(.et-pagination-host[data-fit-width]){flex-grow:1}@media(pointer:coarse){:where(.et-pagination-host){--et-pagination-item-size: 44px}.et-pagination-host{isolation:isolate}.et-pagination-host .et-pagination-button:before{content:\"\";position:absolute;z-index:-1;top:50%;left:50%;inline-size:max(100%,44px);block-size:max(100%,44px);translate:-50% -50%}}.et-pagination-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-pagination-gap);margin:0;padding:0;list-style:none}.et-pagination-item{display:flex}.et-pagination-host .et-pagination-button{--et-button-padding: 0;--et-button-border-radius: var(--et-pagination-radius);padding-inline:4px;min-inline-size:var(--et-pagination-item-size);min-block-size:var(--et-pagination-item-size);font-variant-numeric:tabular-nums}.et-pagination-host .et-pagination-button--control{padding-inline:0;inline-size:var(--et-pagination-item-size)}.et-pagination-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--et-pagination-item-size);block-size:var(--et-pagination-item-size);color:var(--et-surface-color-muted-solid, CanvasText);-webkit-user-select:none;user-select:none}.et-pagination-range{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-range,.et-pagination-status{display:inline-grid;grid-template-columns:auto;justify-items:center}.et-pagination-readout-sizer,.et-pagination-readout-text{grid-area:1 / 1;white-space:nowrap}.et-pagination-readout-sizer{visibility:hidden}.et-pagination-jump{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}.et-pagination-jump-input{inline-size:64px;min-block-size:var(--et-pagination-item-size);padding-inline:8px;font:inherit;font-variant-numeric:tabular-nums;color:var(--et-surface-color-solid, CanvasText);background:transparent;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));border-radius:var(--et-pagination-radius)}.et-pagination-jump-input:where(:focus-visible){outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px}.et-pagination-host:where([data-size=sm]){--et-pagination-item-size: 28px;--et-pagination-gap: 4px}.et-pagination-host:where([data-size=sm]) .et-pagination-button{--et-button-padding: 2px 0;font-size:13px}.et-pagination-host:where([data-compact]){--et-pagination-item-size: 34px;--et-pagination-gap: 2px}.et-pagination-status{align-items:center;min-block-size:var(--et-pagination-item-size);padding-inline:6px;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--et-surface-color-muted-solid, CanvasText)}}\n"] }]
|
|
53277
53292
|
}], propDecorators: { renderAs: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderAs", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], urlForPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "urlForPage", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], showJumpTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpTo", required: false }] }], listEl: [{ type: i0.ViewChild, args: ['paginationList', { isSignal: true }] }], itemEls: [{ type: i0.ViewChildren, args: ['paginationItem', { isSignal: true }] }] } });
|
|
53278
53293
|
|
|
53279
53294
|
const PAGINATION_IMPORTS = [PaginationComponent, PaginationDirective];
|
|
@@ -57972,6 +57987,7 @@ const STREAM_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
57972
57987
|
const container = renderer.createElement('div');
|
|
57973
57988
|
renderer.addClass(container, 'et-stream-manager');
|
|
57974
57989
|
renderer.appendChild(document.body, container);
|
|
57990
|
+
inject(DestroyRef).onDestroy(() => container.remove());
|
|
57975
57991
|
const viewportSize = injectViewportSize();
|
|
57976
57992
|
const players = new Map();
|
|
57977
57993
|
const slots = new Map();
|
|
@@ -59689,7 +59705,8 @@ const PIP_CHROME_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
59689
59705
|
const destroyPipChrome = () => {
|
|
59690
59706
|
if (!pipChromeRef)
|
|
59691
59707
|
return;
|
|
59692
|
-
appRef.
|
|
59708
|
+
if (!appRef.destroyed)
|
|
59709
|
+
appRef.detachView(pipChromeRef.hostView);
|
|
59693
59710
|
pipChromeRef.destroy();
|
|
59694
59711
|
pipChromeRef = null;
|
|
59695
59712
|
};
|
|
@@ -60174,10 +60191,11 @@ class DailymotionPlayerDirective {
|
|
|
60174
60191
|
},
|
|
60175
60192
|
});
|
|
60176
60193
|
effect(() => {
|
|
60177
|
-
const
|
|
60194
|
+
const isLoading = this.playerResource.isLoading();
|
|
60195
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
60178
60196
|
this.state.update((s) => ({
|
|
60179
60197
|
...s,
|
|
60180
|
-
isLoading: error !== undefined ? false :
|
|
60198
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
60181
60199
|
error: error ?? null,
|
|
60182
60200
|
}));
|
|
60183
60201
|
});
|
|
@@ -60222,7 +60240,7 @@ class DailymotionPlayerComponent {
|
|
|
60222
60240
|
this.player = inject(DAILYMOTION_PLAYER_TOKEN);
|
|
60223
60241
|
}
|
|
60224
60242
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DailymotionPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60225
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: DailymotionPlayerComponent, isStandalone: true, selector: "et-dailymotion-player", host: {
|
|
60243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: DailymotionPlayerComponent, isStandalone: true, selector: "et-dailymotion-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-dailymotion-player et-stream-player" }, hostDirectives: [{ directive: DailymotionPlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: DailymotionPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
60226
60244
|
}
|
|
60227
60245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DailymotionPlayerComponent, decorators: [{
|
|
60228
60246
|
type: Component,
|
|
@@ -60239,7 +60257,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
60239
60257
|
],
|
|
60240
60258
|
host: {
|
|
60241
60259
|
class: 'et-dailymotion-player et-stream-player',
|
|
60242
|
-
style: '
|
|
60260
|
+
'[style.display]': '"block"',
|
|
60261
|
+
'[style.width]': '"100%"',
|
|
60262
|
+
'[style.height]': '"100%"',
|
|
60243
60263
|
},
|
|
60244
60264
|
}]
|
|
60245
60265
|
}] });
|
|
@@ -60307,6 +60327,7 @@ const STREAM_SCRIPT_LOADER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
60307
60327
|
const cache = new Map();
|
|
60308
60328
|
const mountedScripts = new Set();
|
|
60309
60329
|
const renderer = injectRenderer();
|
|
60330
|
+
const nonce = inject(CSP_NONCE, { optional: true });
|
|
60310
60331
|
const load = (src) => {
|
|
60311
60332
|
const cached = cache.get(src);
|
|
60312
60333
|
if (cached)
|
|
@@ -60321,6 +60342,8 @@ const STREAM_SCRIPT_LOADER_DEF = /* @__PURE__ */ defineRootProvider(() => {
|
|
|
60321
60342
|
const script = renderer.createElement('script');
|
|
60322
60343
|
script.src = src;
|
|
60323
60344
|
script.async = true;
|
|
60345
|
+
if (nonce)
|
|
60346
|
+
renderer.setAttribute(script, 'nonce', nonce);
|
|
60324
60347
|
renderer.listen(script, 'load', () => {
|
|
60325
60348
|
subscriber.next();
|
|
60326
60349
|
subscriber.complete();
|
|
@@ -60461,10 +60484,11 @@ class FacebookPlayerDirective {
|
|
|
60461
60484
|
},
|
|
60462
60485
|
});
|
|
60463
60486
|
effect(() => {
|
|
60464
|
-
const
|
|
60487
|
+
const isLoading = this.playerResource.isLoading();
|
|
60488
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
60465
60489
|
this.state.update((s) => ({
|
|
60466
60490
|
...s,
|
|
60467
|
-
isLoading: error !== undefined ? false :
|
|
60491
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
60468
60492
|
error: error ?? null,
|
|
60469
60493
|
}));
|
|
60470
60494
|
});
|
|
@@ -60510,7 +60534,7 @@ class FacebookPlayerComponent {
|
|
|
60510
60534
|
this.player = inject(FACEBOOK_PLAYER_TOKEN);
|
|
60511
60535
|
}
|
|
60512
60536
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FacebookPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60513
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FacebookPlayerComponent, isStandalone: true, selector: "et-facebook-player", host: {
|
|
60537
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FacebookPlayerComponent, isStandalone: true, selector: "et-facebook-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-facebook-player et-stream-player" }, hostDirectives: [{ directive: FacebookPlayerParamsDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }, { directive: FacebookPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
60514
60538
|
}
|
|
60515
60539
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FacebookPlayerComponent, decorators: [{
|
|
60516
60540
|
type: Component,
|
|
@@ -60527,7 +60551,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
60527
60551
|
],
|
|
60528
60552
|
host: {
|
|
60529
60553
|
class: 'et-facebook-player et-stream-player',
|
|
60530
|
-
style: '
|
|
60554
|
+
'[style.display]': '"block"',
|
|
60555
|
+
'[style.width]': '"100%"',
|
|
60556
|
+
'[style.height]': '"100%"',
|
|
60531
60557
|
},
|
|
60532
60558
|
}]
|
|
60533
60559
|
}] });
|
|
@@ -60647,10 +60673,11 @@ class KickPlayerDirective {
|
|
|
60647
60673
|
},
|
|
60648
60674
|
});
|
|
60649
60675
|
effect(() => {
|
|
60650
|
-
const
|
|
60676
|
+
const isLoading = this.playerResource.isLoading();
|
|
60677
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
60651
60678
|
this.state.update((s) => ({
|
|
60652
60679
|
...s,
|
|
60653
|
-
isLoading: error !== undefined ? false :
|
|
60680
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
60654
60681
|
error: error ?? null,
|
|
60655
60682
|
}));
|
|
60656
60683
|
});
|
|
@@ -60695,7 +60722,7 @@ class KickPlayerComponent {
|
|
|
60695
60722
|
this.player = inject(KICK_PLAYER_TOKEN);
|
|
60696
60723
|
}
|
|
60697
60724
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: KickPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60698
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: KickPlayerComponent, isStandalone: true, selector: "et-kick-player", host: {
|
|
60725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: KickPlayerComponent, isStandalone: true, selector: "et-kick-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-kick-player et-stream-player" }, hostDirectives: [{ directive: KickPlayerParamsDirective, inputs: ["channel", "channel", "width", "width", "height", "height", "muted", "muted"] }, { directive: KickPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
60699
60726
|
}
|
|
60700
60727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: KickPlayerComponent, decorators: [{
|
|
60701
60728
|
type: Component,
|
|
@@ -60712,7 +60739,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
60712
60739
|
],
|
|
60713
60740
|
host: {
|
|
60714
60741
|
class: 'et-kick-player et-stream-player',
|
|
60715
|
-
style: '
|
|
60742
|
+
'[style.display]': '"block"',
|
|
60743
|
+
'[style.width]': '"100%"',
|
|
60744
|
+
'[style.height]': '"100%"',
|
|
60716
60745
|
},
|
|
60717
60746
|
}]
|
|
60718
60747
|
}] });
|
|
@@ -60847,10 +60876,11 @@ class SoopPlayerDirective {
|
|
|
60847
60876
|
},
|
|
60848
60877
|
});
|
|
60849
60878
|
effect(() => {
|
|
60850
|
-
const
|
|
60879
|
+
const isLoading = this.playerResource.isLoading();
|
|
60880
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
60851
60881
|
this.state.update((s) => ({
|
|
60852
60882
|
...s,
|
|
60853
|
-
isLoading: error !== undefined ? false :
|
|
60883
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
60854
60884
|
error: error ?? null,
|
|
60855
60885
|
}));
|
|
60856
60886
|
});
|
|
@@ -60895,7 +60925,7 @@ class SoopPlayerComponent {
|
|
|
60895
60925
|
this.player = inject(SOOP_PLAYER_TOKEN);
|
|
60896
60926
|
}
|
|
60897
60927
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SoopPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
60898
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SoopPlayerComponent, isStandalone: true, selector: "et-soop-player", host: {
|
|
60928
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SoopPlayerComponent, isStandalone: true, selector: "et-soop-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-soop-player et-stream-player" }, hostDirectives: [{ directive: SoopPlayerParamsDirective, inputs: ["userId", "userId", "videoId", "videoId", "width", "width", "height", "height"] }, { directive: SoopPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
60899
60929
|
}
|
|
60900
60930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SoopPlayerComponent, decorators: [{
|
|
60901
60931
|
type: Component,
|
|
@@ -60912,7 +60942,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
60912
60942
|
],
|
|
60913
60943
|
host: {
|
|
60914
60944
|
class: 'et-soop-player et-stream-player',
|
|
60915
|
-
style: '
|
|
60945
|
+
'[style.display]': '"block"',
|
|
60946
|
+
'[style.width]': '"100%"',
|
|
60947
|
+
'[style.height]': '"100%"',
|
|
60916
60948
|
},
|
|
60917
60949
|
}]
|
|
60918
60950
|
}] });
|
|
@@ -61073,10 +61105,11 @@ class TikTokPlayerDirective {
|
|
|
61073
61105
|
},
|
|
61074
61106
|
});
|
|
61075
61107
|
effect(() => {
|
|
61076
|
-
const
|
|
61108
|
+
const isLoading = this.playerResource.isLoading();
|
|
61109
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
61077
61110
|
this.state.update((s) => ({
|
|
61078
61111
|
...s,
|
|
61079
|
-
isLoading: error !== undefined ? false :
|
|
61112
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
61080
61113
|
error: error ?? null,
|
|
61081
61114
|
}));
|
|
61082
61115
|
});
|
|
@@ -61128,7 +61161,7 @@ class TikTokPlayerComponent {
|
|
|
61128
61161
|
this.player = inject(TIKTOK_PLAYER_TOKEN);
|
|
61129
61162
|
}
|
|
61130
61163
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TikTokPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TikTokPlayerComponent, isStandalone: true, selector: "et-tiktok-player", host: {
|
|
61164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TikTokPlayerComponent, isStandalone: true, selector: "et-tiktok-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-tiktok-player et-stream-player" }, hostDirectives: [{ directive: TikTokPlayerParamsDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }, { directive: TikTokPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
61132
61165
|
}
|
|
61133
61166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TikTokPlayerComponent, decorators: [{
|
|
61134
61167
|
type: Component,
|
|
@@ -61145,7 +61178,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
61145
61178
|
],
|
|
61146
61179
|
host: {
|
|
61147
61180
|
class: 'et-tiktok-player et-stream-player',
|
|
61148
|
-
style: '
|
|
61181
|
+
'[style.display]': '"block"',
|
|
61182
|
+
'[style.width]': '"100%"',
|
|
61183
|
+
'[style.height]': '"100%"',
|
|
61149
61184
|
},
|
|
61150
61185
|
}]
|
|
61151
61186
|
}] });
|
|
@@ -61363,10 +61398,11 @@ class TwitchPlayerDirective {
|
|
|
61363
61398
|
},
|
|
61364
61399
|
});
|
|
61365
61400
|
effect(() => {
|
|
61366
|
-
const
|
|
61401
|
+
const isLoading = this.playerResource.isLoading();
|
|
61402
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
61367
61403
|
this.state.update((s) => ({
|
|
61368
61404
|
...s,
|
|
61369
|
-
isLoading: error !== undefined ? false :
|
|
61405
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
61370
61406
|
error: error ?? null,
|
|
61371
61407
|
}));
|
|
61372
61408
|
});
|
|
@@ -61418,7 +61454,7 @@ class TwitchPlayerComponent {
|
|
|
61418
61454
|
this.player = inject(TWITCH_PLAYER_TOKEN);
|
|
61419
61455
|
}
|
|
61420
61456
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TwitchPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TwitchPlayerComponent, isStandalone: true, selector: "et-twitch-player", host: {
|
|
61457
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TwitchPlayerComponent, isStandalone: true, selector: "et-twitch-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-twitch-player et-stream-player" }, hostDirectives: [{ directive: TwitchPlayerParamsDirective, inputs: ["src", "src", "width", "width", "height", "height", "autoplay", "autoplay", "chat", "chat", "startTime", "startTime"] }, { directive: TwitchPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
61422
61458
|
}
|
|
61423
61459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TwitchPlayerComponent, decorators: [{
|
|
61424
61460
|
type: Component,
|
|
@@ -61435,7 +61471,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
61435
61471
|
],
|
|
61436
61472
|
host: {
|
|
61437
61473
|
class: 'et-twitch-player et-stream-player',
|
|
61438
|
-
style: '
|
|
61474
|
+
'[style.display]': '"block"',
|
|
61475
|
+
'[style.width]': '"100%"',
|
|
61476
|
+
'[style.height]': '"100%"',
|
|
61439
61477
|
},
|
|
61440
61478
|
}]
|
|
61441
61479
|
}] });
|
|
@@ -61619,10 +61657,11 @@ class VimeoPlayerDirective {
|
|
|
61619
61657
|
},
|
|
61620
61658
|
});
|
|
61621
61659
|
effect(() => {
|
|
61622
|
-
const
|
|
61660
|
+
const isLoading = this.playerResource.isLoading();
|
|
61661
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
61623
61662
|
this.state.update((s) => ({
|
|
61624
61663
|
...s,
|
|
61625
|
-
isLoading: error !== undefined ? false :
|
|
61664
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
61626
61665
|
error: error ?? null,
|
|
61627
61666
|
}));
|
|
61628
61667
|
});
|
|
@@ -61666,7 +61705,7 @@ class VimeoPlayerComponent {
|
|
|
61666
61705
|
this.player = inject(VIMEO_PLAYER_TOKEN);
|
|
61667
61706
|
}
|
|
61668
61707
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VimeoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: VimeoPlayerComponent, isStandalone: true, selector: "et-vimeo-player", host: {
|
|
61708
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: VimeoPlayerComponent, isStandalone: true, selector: "et-vimeo-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-vimeo-player et-stream-player" }, hostDirectives: [{ directive: VimeoPlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: VimeoPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
61670
61709
|
}
|
|
61671
61710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VimeoPlayerComponent, decorators: [{
|
|
61672
61711
|
type: Component,
|
|
@@ -61683,7 +61722,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
61683
61722
|
],
|
|
61684
61723
|
host: {
|
|
61685
61724
|
class: 'et-vimeo-player et-stream-player',
|
|
61686
|
-
style: '
|
|
61725
|
+
'[style.display]': '"block"',
|
|
61726
|
+
'[style.width]': '"100%"',
|
|
61727
|
+
'[style.height]': '"100%"',
|
|
61687
61728
|
},
|
|
61688
61729
|
}]
|
|
61689
61730
|
}] });
|
|
@@ -61851,10 +61892,11 @@ class YoutubePlayerDirective {
|
|
|
61851
61892
|
},
|
|
61852
61893
|
});
|
|
61853
61894
|
effect(() => {
|
|
61854
|
-
const
|
|
61895
|
+
const isLoading = this.playerResource.isLoading();
|
|
61896
|
+
const error = isLoading ? undefined : this.playerResource.error();
|
|
61855
61897
|
this.state.update((s) => ({
|
|
61856
61898
|
...s,
|
|
61857
|
-
isLoading: error !== undefined ? false :
|
|
61899
|
+
isLoading: error !== undefined ? false : isLoading,
|
|
61858
61900
|
error: error ?? null,
|
|
61859
61901
|
}));
|
|
61860
61902
|
});
|
|
@@ -61900,7 +61942,7 @@ class YoutubePlayerComponent {
|
|
|
61900
61942
|
this.player = inject(YOUTUBE_PLAYER_TOKEN);
|
|
61901
61943
|
}
|
|
61902
61944
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: YoutubePlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
61903
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: YoutubePlayerComponent, isStandalone: true, selector: "et-youtube-player", host: {
|
|
61945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: YoutubePlayerComponent, isStandalone: true, selector: "et-youtube-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-youtube-player et-stream-player" }, hostDirectives: [{ directive: YoutubePlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: YoutubePlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
|
|
61904
61946
|
}
|
|
61905
61947
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: YoutubePlayerComponent, decorators: [{
|
|
61906
61948
|
type: Component,
|
|
@@ -61917,7 +61959,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
61917
61959
|
],
|
|
61918
61960
|
host: {
|
|
61919
61961
|
class: 'et-youtube-player et-stream-player',
|
|
61920
|
-
style: '
|
|
61962
|
+
'[style.display]': '"block"',
|
|
61963
|
+
'[style.width]': '"100%"',
|
|
61964
|
+
'[style.height]': '"100%"',
|
|
61921
61965
|
},
|
|
61922
61966
|
}]
|
|
61923
61967
|
}] });
|
|
@@ -64690,7 +64734,7 @@ class TableComponent {
|
|
|
64690
64734
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, quickFilter: { classPropertyName: "quickFilter", publicName: "quickFilter", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "attr.role": "pageStickyHeader() ? \"grid\" : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "class.et-table-host--header-adornments": "headerAdornments().length > 0", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
|
|
64691
64735
|
{ provide: TABLE_FEATURE_HOST, useExisting: TableComponent },
|
|
64692
64736
|
provideIcons(ARROW_UP_ICON, TRIANGLE_EXCLAMATION_ICON),
|
|
64693
|
-
], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n @for (headerRow of headerRows(); track $index) {\n <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n }\n\n <div class=\"et-table-header-row\" role=\"row\">\n <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n table owns the cell chrome; the feature only supplies what goes inside. -->\n @for (lead of leadCells(); track lead.key) {\n <div\n #leadHeaderCell\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n one button, and the only sort affordance is the direction arrow, which appears once the\n column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n @if (cell.sortable) {\n <button\n [attr.aria-label]=\"cell.sortLabel\"\n [attr.aria-description]=\"cell.priorityLabel\"\n [disabled]=\"cell.disabled\"\n (click)=\"activateSortHeader(cell.key, $event)\"\n (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n class=\"et-table-header-label et-table-header-label--sortable\"\n type=\"button\"\n >\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n @if (cell.direction; as direction) {\n <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n swapping; only appearing and disappearing are the fade, and only for a sort the user\n just asked for (see sortIndicatorEnter). -->\n <i\n [attr.data-direction]=\"direction\"\n [animate.enter]=\"sortIndicatorEnter()\"\n [animate.leave]=\"sortIndicatorLeave()\"\n class=\"et-table-sort-indicator\"\n etIcon=\"et-arrow-up\"\n ></i>\n }\n @if (cell.priority; as priority) {\n <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n }\n </span>\n </button>\n } @else {\n <span class=\"et-table-header-label\">\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n </span>\n </span>\n }\n\n <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n registerHeaderAdornment. Renders nothing when no feature is imported.\n\n Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n the trigger is what closes it. -->\n @if (!cell.obscured && headerAdornments().length) {\n <div class=\"et-table-header-adornments\">\n @for (adornment of headerAdornments(); track $index) {\n <ng-container\n *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n />\n }\n </div>\n }\n </div>\n }\n <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n panel's edge when every column is a rigid width. -->\n @if (hasFiller()) {\n <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n @for (trail of trailCells(); track trail.key) {\n <div\n #trailHeaderCell\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #bodyContent>\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [attr.aria-label]=\"cell.message\"\n [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</ng-template>\n\n@if (pageStickyHeader()) {\n <div class=\"et-table-header-strip\" role=\"presentation\">\n <div\n #headerGrid\n [style.grid-template-columns]=\"pageHeaderColumns()\"\n class=\"et-table et-table-header\"\n role=\"rowgroup\"\n >\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n </div>\n </div>\n <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n </div>\n} @else {\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
64737
|
+
], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerGridRef", first: true, predicate: ["headerGrid"], descendants: true, isSignal: true }, { propertyName: "scrollerRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n @for (headerRow of headerRows(); track $index) {\n <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n }\n\n <div class=\"et-table-header-row\" role=\"row\">\n <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n table owns the cell chrome; the feature only supplies what goes inside. -->\n @for (lead of leadCells(); track lead.key) {\n <div\n #leadHeaderCell\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n one button, and the only sort affordance is the direction arrow, which appears once the\n column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n @if (cell.sortable) {\n <button\n [attr.aria-label]=\"cell.sortLabel\"\n [attr.aria-description]=\"cell.priorityLabel\"\n [disabled]=\"cell.disabled\"\n (click)=\"activateSortHeader(cell.key, $event)\"\n (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n class=\"et-table-header-label et-table-header-label--sortable\"\n type=\"button\"\n >\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n @if (cell.direction; as direction) {\n <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n swapping; only appearing and disappearing are the fade, and only for a sort the user\n just asked for (see sortIndicatorEnter). -->\n <i\n [attr.data-direction]=\"direction\"\n [animate.enter]=\"sortIndicatorEnter()\"\n [animate.leave]=\"sortIndicatorLeave()\"\n class=\"et-table-sort-indicator\"\n etIcon=\"et-arrow-up\"\n ></i>\n }\n @if (cell.priority; as priority) {\n <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n }\n </span>\n </button>\n } @else {\n <span class=\"et-table-header-label\">\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n </span>\n </span>\n }\n\n <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n registerHeaderAdornment. Renders nothing when no feature is imported.\n\n Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n the trigger is what closes it. -->\n @if (!cell.obscured && headerAdornments().length) {\n <div class=\"et-table-header-adornments\">\n @for (adornment of headerAdornments(); track $index) {\n <ng-container\n *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n />\n }\n </div>\n }\n </div>\n }\n <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n panel's edge when every column is a rigid width. -->\n @if (hasFiller()) {\n <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n @for (trail of trailCells(); track trail.key) {\n <div\n #trailHeaderCell\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #bodyContent>\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [label]=\"cell.message\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</ng-template>\n\n@if (pageStickyHeader()) {\n <div class=\"et-table-header-strip\" role=\"presentation\">\n <div\n #headerGrid\n [style.grid-template-columns]=\"pageHeaderColumns()\"\n class=\"et-table et-table-header\"\n role=\"rowgroup\"\n >\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n </div>\n </div>\n <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n </div>\n} @else {\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "directive", type: TableCardSurfaceDirective, selector: "[etTableCardSurface]", inputs: ["etTableCardSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
64694
64738
|
}
|
|
64695
64739
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TableComponent, decorators: [{
|
|
64696
64740
|
type: Component,
|
|
@@ -64710,7 +64754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
64710
64754
|
'[class.et-table-host--header-adornments]': 'headerAdornments().length > 0',
|
|
64711
64755
|
'[style.--_et-table-viewport-inline-size.px]': 'viewportInlineSize()',
|
|
64712
64756
|
'(scroll)': 'syncScrollState()',
|
|
64713
|
-
}, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n @for (headerRow of headerRows(); track $index) {\n <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n }\n\n <div class=\"et-table-header-row\" role=\"row\">\n <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n table owns the cell chrome; the feature only supplies what goes inside. -->\n @for (lead of leadCells(); track lead.key) {\n <div\n #leadHeaderCell\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n one button, and the only sort affordance is the direction arrow, which appears once the\n column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n @if (cell.sortable) {\n <button\n [attr.aria-label]=\"cell.sortLabel\"\n [attr.aria-description]=\"cell.priorityLabel\"\n [disabled]=\"cell.disabled\"\n (click)=\"activateSortHeader(cell.key, $event)\"\n (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n class=\"et-table-header-label et-table-header-label--sortable\"\n type=\"button\"\n >\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n @if (cell.direction; as direction) {\n <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n swapping; only appearing and disappearing are the fade, and only for a sort the user\n just asked for (see sortIndicatorEnter). -->\n <i\n [attr.data-direction]=\"direction\"\n [animate.enter]=\"sortIndicatorEnter()\"\n [animate.leave]=\"sortIndicatorLeave()\"\n class=\"et-table-sort-indicator\"\n etIcon=\"et-arrow-up\"\n ></i>\n }\n @if (cell.priority; as priority) {\n <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n }\n </span>\n </button>\n } @else {\n <span class=\"et-table-header-label\">\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n </span>\n </span>\n }\n\n <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n registerHeaderAdornment. Renders nothing when no feature is imported.\n\n Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n the trigger is what closes it. -->\n @if (!cell.obscured && headerAdornments().length) {\n <div class=\"et-table-header-adornments\">\n @for (adornment of headerAdornments(); track $index) {\n <ng-container\n *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n />\n }\n </div>\n }\n </div>\n }\n <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n panel's edge when every column is a rigid width. -->\n @if (hasFiller()) {\n <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n @for (trail of trailCells(); track trail.key) {\n <div\n #trailHeaderCell\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #bodyContent>\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [attr.aria-label]=\"cell.message\"\n [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</ng-template>\n\n@if (pageStickyHeader()) {\n <div class=\"et-table-header-strip\" role=\"presentation\">\n <div\n #headerGrid\n [style.grid-template-columns]=\"pageHeaderColumns()\"\n class=\"et-table et-table-header\"\n role=\"rowgroup\"\n >\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n </div>\n </div>\n <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n </div>\n} @else {\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
|
|
64757
|
+
}, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<ng-template #headerContent>\n <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n @for (headerRow of headerRows(); track $index) {\n <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n }\n\n <div class=\"et-table-header-row\" role=\"row\">\n <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n table owns the cell chrome; the feature only supplies what goes inside. -->\n @for (lead of leadCells(); track lead.key) {\n <div\n #leadHeaderCell\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : lead.offset\"\n [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (lead.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n }\n </div>\n }\n @for (cell of headerCellVms(); track cell.key) {\n <div\n #headerCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.data-disabled]=\"cell.disabled || null\"\n [attr.aria-sort]=\"cell.ariaSort\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"pageStickyHeader() ? null : cell.offsetStart\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : cell.offsetEnd\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n one button, and the only sort affordance is the direction arrow, which appears once the\n column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n @if (cell.sortable) {\n <button\n [attr.aria-label]=\"cell.sortLabel\"\n [attr.aria-description]=\"cell.priorityLabel\"\n [disabled]=\"cell.disabled\"\n (click)=\"activateSortHeader(cell.key, $event)\"\n (keydown.shift.enter)=\"activateSortHeader(cell.key, $event)\"\n class=\"et-table-header-label et-table-header-label--sortable\"\n type=\"button\"\n >\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n @if (cell.direction; as direction) {\n <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n swapping; only appearing and disappearing are the fade, and only for a sort the user\n just asked for (see sortIndicatorEnter). -->\n <i\n [attr.data-direction]=\"direction\"\n [animate.enter]=\"sortIndicatorEnter()\"\n [animate.leave]=\"sortIndicatorLeave()\"\n class=\"et-table-sort-indicator\"\n etIcon=\"et-arrow-up\"\n ></i>\n }\n @if (cell.priority; as priority) {\n <span class=\"et-table-sort-priority\" aria-hidden=\"true\">{{ priority }}</span>\n }\n </span>\n </button>\n } @else {\n <span class=\"et-table-header-label\">\n <span class=\"et-table-header-label-box\">\n @if (cell.template; as headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n }\n </span>\n </span>\n }\n\n <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n registerHeaderAdornment. Renders nothing when no feature is imported.\n\n Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n the trigger is what closes it. -->\n @if (!cell.obscured && headerAdornments().length) {\n <div class=\"et-table-header-adornments\">\n @for (adornment of headerAdornments(); track $index) {\n <ng-container\n *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n />\n }\n </div>\n }\n </div>\n }\n <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n panel's edge when every column is a rigid width. -->\n @if (hasFiller()) {\n <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n @for (trail of trailCells(); track trail.key) {\n <div\n #trailHeaderCell\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"pageStickyHeader() ? null : trail.offset\"\n [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n class=\"et-table-header-cell\"\n role=\"columnheader\"\n >\n @if (trail.lead.headerComponent; as headerComponent) {\n <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #bodyContent>\n <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n table takes no component dependencies, and this is 2px of chrome, not a control. -->\n @if (showBusyBar()) {\n <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n vanishes reads as a flicker rather than as work happening. -->\n <div\n class=\"et-table-busy-bar\"\n animate.enter=\"et-table-busy-bar--enter\"\n animate.leave=\"et-table-busy-bar--leave\"\n role=\"presentation\"\n aria-hidden=\"true\"\n ></div>\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n @if (hasError()) {\n <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n @if (errorTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n } @else {\n <ng-content select=\"[etTableError]\">\n <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n <span>{{ resolvedLabels().error }}</span>\n </ng-content>\n }\n </div>\n </div>\n } @else if (showPlaceholderRows()) {\n <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n @if (bodyPlaceholder(); as placeholder) {\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n }\n } @else {\n @for (rowVm of bodyRows(); track rowVm.key) {\n <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n <div\n [class]=\"rowVm.classes\"\n [class.et-table-row--stripe]=\"rowVm.stripe\"\n [class.et-table-row--last]=\"rowVm.last\"\n [class.et-table-row--interactive]=\"rowInteractive()\"\n [class.et-table-row--box]=\"rowBox()\"\n [class.et-table-row--card]=\"cardRows()\"\n [class.et-table-row--link]=\"rowVm.href !== null\"\n [etTableCardSurface]=\"cardRows()\"\n [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n (click)=\"activateRow(rowVm.row, $event)\"\n (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n (keydown.space)=\"activateRow(rowVm.row, $event)\"\n class=\"et-table-row\"\n role=\"row\"\n >\n @for (lead of rowVm.leads; track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n />\n </div>\n }\n @for (cell of rowVm.cells; track cell.key) {\n <div\n #bodyCell\n [attr.data-align]=\"cell.align\"\n [attr.data-col-key]=\"cell.key\"\n [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n [attr.data-state]=\"cell.state\"\n [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n [class.et-table-cell--interactive]=\"cell.interactive\"\n [class.et-table-cell--editing]=\"cell.edit\"\n [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n @if (cell.edit; as edit) {\n <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n editing feature's own context (the draft field). See registerCellEditing. -->\n <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n instead of its value; the row around it stays readable. Without one the value stays put\n and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n } @else {\n @if (cell.state === 'error') {\n @if (cellErrorMark(); as mark) {\n <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n only ships when a table actually wants a tooltip. -->\n <ng-container\n *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n />\n } @else {\n <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n as an error, and a provider per errored cell is cheap where one per cell would not\n be. The message rides along as `title`, which costs nothing. -->\n <i\n [etProvideColor]=\"errorColorTheme\"\n [attr.title]=\"cell.message\"\n [label]=\"cell.message\"\n class=\"et-table-cell-error-icon\"\n etIcon=\"et-triangle-exclamation\"\n ></i>\n }\n }\n @if (cell.template; as bodyTemplate) {\n <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n } @else {\n <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n }\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of rowVm.trails; track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-cell\"\n role=\"gridcell\"\n >\n <ng-container\n *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n />\n </div>\n }\n\n @if (rowVm.href !== null) {\n <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n wrapping any content, so the cells stay exactly as a table without links renders them.\n It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n resolves to that cell's content, which is the row's identity.\n\n A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n therefore be the anchor's containing block, shrinking the row's hit area to that one\n column. The row box is the containing block that spans every cell. -->\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n <a\n [attr.href]=\"rowVm.href\"\n [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n (click)=\"activateRowLink(rowVm.link, $event)\"\n class=\"et-table-row-link\"\n ></a>\n }\n\n @if (cardRows()) {\n <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n </div>\n\n <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n its animation belong to the feature, so a table that never expands carries none of them. -->\n @if (rowVm.detail; as detail) {\n <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n }\n } @empty {\n <div class=\"et-table-message-row\" role=\"row\">\n <div class=\"et-table-empty-cell\" role=\"gridcell\">\n @if (emptyTemplate(); as template) {\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n } @else {\n <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n }\n </div>\n </div>\n }\n }\n\n @if (spacers(); as spacer) {\n <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n\n <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n their place with `position: sticky` for the entire scroll range. -->\n <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n <div\n [style.inset-inline-start.px]=\"fadeInset().start\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n ></div>\n <div\n [style.inset-inline-end.px]=\"fadeInset().end\"\n [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n ></div>\n </div>\n\n @if (hasFooter()) {\n <div class=\"et-table-footer-row\" role=\"row\">\n @for (lead of leadCells(); track lead.key) {\n <div\n [class]=\"lead.cellClass\"\n [class.et-table-sticky-start]=\"lead.sticky\"\n [style.inset-inline-start.px]=\"lead.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n @for (cell of footerCells(); track cell.key) {\n <div\n [attr.data-align]=\"cell.align\"\n [class.et-table-sticky-start]=\"cell.stickyStart\"\n [class.et-table-sticky-end]=\"cell.stickyEnd\"\n [style.inset-inline-start.px]=\"cell.offsetStart\"\n [style.inset-inline-end.px]=\"cell.offsetEnd\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n >\n @if (cell.template; as footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n }\n </div>\n }\n @if (hasFiller()) {\n <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n }\n @for (trail of trailCells(); track trail.key) {\n <div\n [class]=\"trail.cellClass\"\n [class.et-table-sticky-end]=\"trail.sticky\"\n [style.inset-inline-end.px]=\"trail.offset\"\n class=\"et-table-footer-cell\"\n role=\"gridcell\"\n aria-hidden=\"true\"\n ></div>\n }\n </div>\n }\n</ng-template>\n\n@if (pageStickyHeader()) {\n <div class=\"et-table-header-strip\" role=\"presentation\">\n <div\n #headerGrid\n [style.grid-template-columns]=\"pageHeaderColumns()\"\n class=\"et-table et-table-header\"\n role=\"rowgroup\"\n >\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n </div>\n </div>\n <div #scroller (scroll)=\"syncScrollState()\" class=\"et-table-scroller\" role=\"presentation\">\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"rowgroup\">\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n </div>\n} @else {\n <div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n <ng-container *ngTemplateOutlet=\"headerContent\" />\n <ng-container *ngTemplateOutlet=\"bodyContent\" />\n </div>\n}\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n <div class=\"et-table-footer\">\n <ng-content select=\"[etTableFooter]\" />\n </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-table-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-header-adornment-size: 2.4rem;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-hover-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-hover-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-row-hover: var(--_et-table-hover-tint);--_et-table-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-pressed-tint: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);--_et-table-pressed-tint-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 16%, var(--_et-table-row-surface) );--_et-table-row-pressed: var(--_et-table-pressed-tint);--_et-table-row-pressed-solid: var(--_et-table-pressed-tint-solid);--_et-table-inert-row-hover: var(--_et-table-hover-tint);--_et-table-inert-row-hover-solid: var(--_et-table-hover-tint-solid);--_et-table-row-gap-block: 0px;--_et-table-row-paint: transparent;--_et-table-row-corner: 0px;--_et-table-header-gap-block: 0px;--_et-table-cell-rule: 0;--_et-table-sticky-clip: none;--_et-table-busy-margin-block-start: 0px;--_et-table-busy-margin-block-end: -2px;--_et-table-detail-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-radius, 10px)}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-cell-rule: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15));--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-row-gap-block: var(--et-table-row-gap, 8px);--_et-table-row-corner: var(--et-table-row-radius, 10px);--_et-table-header-gap-block: var(--et-table-row-gap, 8px);--_et-table-sticky-clip: inset(0 -24px);--_et-table-busy-margin-block-start: calc((var(--et-table-row-gap, 8px) + 2px) / -2);--_et-table-busy-margin-block-end: calc((var(--et-table-row-gap, 8px) - 2px) / 2);--_et-table-detail-rule: 0;--_et-table-inert-row-hover: transparent;--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-header-cell.et-table-filler-cell,.et-table-cell.et-table-filler-cell,.et-table-footer-cell.et-table-filler-cell,.et-table-group-cell.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-adornments{display:flex;align-items:center;flex:none}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: var(--_et-table-header-adornment-size);--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-host--header-adornments .et-table-header-cell{min-block-size:calc(max(var(--_et-table-header-adornment-size),24px) + 2 * var(--et-table-cell-padding-block) + 1px)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-header-cell,.et-table-cell{border-inline-end:var(--_et-table-cell-rule)}.et-table-header-row .et-table-header-cell:last-child,.et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-start,.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-pressed-solid)}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row:where(.et-table-row--interactive,.et-table-row--link):active .et-table-cell{background:var(--_et-table-row-pressed)}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-header-label{display:flex;align-items:center;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label-box{display:flex;align-items:center;gap:4px;min-inline-size:0;padding:4px;margin:-4px;border-radius:4px}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-label--sortable .et-table-header-label-box{background-color:var(--_et-table-header-label-tint, transparent);transition:background-color .12s var(--ease-out-5, ease)}@media(hover:hover){.et-table-header-label--sortable:hover:not(:disabled){--_et-table-header-label-tint: var(--_et-table-hover-tint)}}.et-table-header-label--sortable:active:not(:disabled){--_et-table-header-label-tint: var(--_et-table-pressed-tint)}.et-table-header-cell:where([data-disabled]) .et-table-header-label{opacity:var(--et-table-opacity-disabled)}.et-table-header-label:where(.et-table-header-label--sortable:disabled){cursor:not-allowed}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-start:var(--_et-table-busy-margin-block-start);margin-block-end:var(--_et-table-busy-margin-block-end);overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
|
|
64714
64758
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], cellState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellState", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], quickFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickFilter", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], headerGridRef: [{ type: i0.ViewChild, args: ['headerGrid', { isSignal: true }] }], scrollerRef: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
|
|
64715
64759
|
|
|
64716
64760
|
/**
|
|
@@ -64903,7 +64947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
64903
64947
|
* @example
|
|
64904
64948
|
* <!-- the Role column renders a chip, so its placeholder is chip-shaped -->
|
|
64905
64949
|
* <ng-template [etTableCellSkeleton]="COLUMNS.role">
|
|
64906
|
-
* <et-skeleton-item shape="rect" style
|
|
64950
|
+
* <et-skeleton-item shape="rect" [style.inline-size.px]="64" [style.block-size.px]="24" [style.--et-skeleton-radius.px]="999" />
|
|
64907
64951
|
* </ng-template>
|
|
64908
64952
|
*/
|
|
64909
64953
|
class TableCellSkeletonDirective {
|
|
@@ -65058,8 +65102,7 @@ class TableCellErrorMarkComponent {
|
|
|
65058
65102
|
[etProvideColor]="feature.table.errorColorTheme"
|
|
65059
65103
|
[etTooltip]="message()"
|
|
65060
65104
|
[etTooltipDisabled]="!message()"
|
|
65061
|
-
[
|
|
65062
|
-
[attr.aria-hidden]="message() ? null : 'true'"
|
|
65105
|
+
[label]="message()"
|
|
65063
65106
|
[attr.tabindex]="message() ? 0 : null"
|
|
65064
65107
|
class="et-table-cell-error-icon"
|
|
65065
65108
|
etIcon="et-triangle-exclamation"
|
|
@@ -65075,8 +65118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
65075
65118
|
[etProvideColor]="feature.table.errorColorTheme"
|
|
65076
65119
|
[etTooltip]="message()"
|
|
65077
65120
|
[etTooltipDisabled]="!message()"
|
|
65078
|
-
[
|
|
65079
|
-
[attr.aria-hidden]="message() ? null : 'true'"
|
|
65121
|
+
[label]="message()"
|
|
65080
65122
|
[attr.tabindex]="message() ? 0 : null"
|
|
65081
65123
|
class="et-table-cell-error-icon"
|
|
65082
65124
|
etIcon="et-triangle-exclamation"
|
|
@@ -66267,9 +66309,10 @@ class TableGroupHeaderRowComponent {
|
|
|
66267
66309
|
this.feature = inject(TableGroupHeadersDirective);
|
|
66268
66310
|
this.table = injectTableFeatureHost('etTableGroupHeaders');
|
|
66269
66311
|
// Measured so the column-header row can stick just below this one - see the feature's host binding.
|
|
66312
|
+
// Every group cell shares one grid row, so the first one's height is the row's.
|
|
66270
66313
|
this.groupCells = viewChildren('groupCell', /* @ts-ignore */
|
|
66271
66314
|
...(ngDevMode ? [{ debugName: "groupCells" }] : /* istanbul ignore next */ []));
|
|
66272
|
-
this.groupCellDimensions = signalElementDimensions(computed(() =>
|
|
66315
|
+
this.groupCellDimensions = signalElementDimensions(computed(() => this.groupCells()[0] ?? null));
|
|
66273
66316
|
/** Rendered height of the row, for the header row's sticky offset. */
|
|
66274
66317
|
this.blockSize = computed(() => this.groupCellDimensions()?.offset?.height ?? 0, /* @ts-ignore */
|
|
66275
66318
|
...(ngDevMode ? [{ debugName: "blockSize" }] : /* istanbul ignore next */ []));
|
|
@@ -67938,10 +67981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
67938
67981
|
* standing in for the rest so the scrollbar still reflects the whole row count.
|
|
67939
67982
|
*
|
|
67940
67983
|
* The table is its own scroll container, so give it a bounded height (e.g.
|
|
67941
|
-
* `style
|
|
67984
|
+
* `[style.block-size.rem]="24"` or a class) for the window to track.
|
|
67942
67985
|
*
|
|
67943
67986
|
* @example
|
|
67944
|
-
* <et-table [data]="manyRows()" [columns]="COLUMNS" style
|
|
67987
|
+
* <et-table [data]="manyRows()" [columns]="COLUMNS" [style.block-size.rem]="24" etTableVirtualScroll />
|
|
67945
67988
|
*
|
|
67946
67989
|
* <!-- with options -->
|
|
67947
67990
|
* <et-table [etTableVirtualScroll]="{ estimateRowHeight: 52 }" … />
|
|
@@ -69121,7 +69164,7 @@ class TabComponent {
|
|
|
69121
69164
|
}
|
|
69122
69165
|
}
|
|
69123
69166
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: TabComponent, isStandalone: true, selector: "et-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: {
|
|
69167
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: TabComponent, isStandalone: true, selector: "et-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"none\"" }, classAttribute: "et-tab" }, queries: [{ propertyName: "customLabel", first: true, predicate: TabLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "implicitLabelRef", first: true, predicate: ["implicitLabel"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
69125
69168
|
<ng-template #implicitLabel>{{ label() }}</ng-template>
|
|
69126
69169
|
<ng-template #contentTpl>
|
|
69127
69170
|
<ng-content />
|
|
@@ -69141,7 +69184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
69141
69184
|
encapsulation: ViewEncapsulation.None,
|
|
69142
69185
|
host: {
|
|
69143
69186
|
class: 'et-tab',
|
|
69144
|
-
style: '
|
|
69187
|
+
'[style.display]': '"none"',
|
|
69145
69188
|
},
|
|
69146
69189
|
}]
|
|
69147
69190
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabLabelDirective), { isSignal: true }] }], implicitLabelRef: [{ type: i0.ViewChild, args: ['implicitLabel', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
|
|
@@ -70238,7 +70281,7 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
|
|
|
70238
70281
|
|
|
70239
70282
|
// Generated from package.json by tools/scripts/generate-version.js - do not edit.
|
|
70240
70283
|
/** The version of `@ethlete/components` this build was cut from. */
|
|
70241
|
-
const COMPONENTS_VERSION = '1.0.0-next.
|
|
70284
|
+
const COMPONENTS_VERSION = '1.0.0-next.63';
|
|
70242
70285
|
|
|
70243
70286
|
/**
|
|
70244
70287
|
* Generated bundle index. Do not edit.
|