@eagami/ui 5.71.1 → 5.72.0

package/README.md

@@ -78,6 +78,7 @@ Everything else is a CSS custom property you can override. See [Design tokens](h
 `showErrorsOn` sets when form components show a validation error:
 
 - `'change'` (the default): once the user changes the field and leaves it, or submits the form. A field the user tabs past stays quiet, and a new error waits until focus leaves the field.
+- `'blur'`: as soon as the user leaves the field, even unchanged, while a new error still waits until focus leaves the field.
 - `'touch'`: as soon as the user leaves the field, even unchanged, and live while they edit it after that.
 
 Set it app-wide with `forms`, or on a single field with the `showErrorsOn` input every form component takes:

package/fesm2022/eagami-ui.mjs

@@ -5570,7 +5570,7 @@ function controlErrorStateFrom(control, config) {
 	const destroyRef = inject(DestroyRef);
 	const host = inject(ElementRef, { optional: true });
 	const formsConfig = inject(EAGAMI_FORMS_CONFIG);
-	const showOnTouch = computed(() => (config.showErrorsOn?.() ?? formsConfig.showErrorsOn ?? "change") === "touch", ...ngDevMode ? [{ debugName: "showOnTouch" }] : /* istanbul ignore next */ []);
+	const showErrorsOn = computed(() => config.showErrorsOn?.() ?? formsConfig.showErrorsOn ?? "change", ...ngDevMode ? [{ debugName: "showErrorsOn" }] : /* istanbul ignore next */ []);
 	const revision = signal(0, ...ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []);
 	const editing = signal(false, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
 	const revealedBySubmit = signal(false, ...ngDevMode ? [{ debugName: "revealedBySubmit" }] : /* istanbul ignore next */ []);
@@ -5634,14 +5634,14 @@ function controlErrorStateFrom(control, config) {
 		revision();
 		const ctrl = control();
 		if (!ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) return null;
-		if (ctrl.pristine && passedThrough() && !showOnTouch()) return null;
+		if (ctrl.pristine && passedThrough() && showErrorsOn() === "change") return null;
 		return resolveValidationMessage(ctrl.errors, config.errorMessages(), i18n.messages());
 	}, ...ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []);
 	const autoError = linkedSignal({
 		...ngDevMode ? { debugName: "autoError" } : /* istanbul ignore next */ {},
 		source: () => ({
 			message: validationError(),
-			holding: revealPending() || editing() && !revealedBySubmit() && !showOnTouch()
+			holding: revealPending() || editing() && !revealedBySubmit() && showErrorsOn() !== "touch"
 		}),
 		computation: ({ message, holding }, previous) => previous?.value || !holding ? message : null
 	});
@@ -15067,6 +15067,8 @@ var MenuComponent = class MenuComponent {
 	triggerEl = signal(void 0, ...ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []);
 	asContextMenu = signal(false, ...ngDevMode ? [{ debugName: "asContextMenu" }] : /* istanbul ignore next */ []);
 	anchorPoint = signal(null, ...ngDevMode ? [{ debugName: "anchorPoint" }] : /* istanbul ignore next */ []);
+	openedWith = signal(void 0, ...ngDevMode ? [{ debugName: "openedWith" }] : /* istanbul ignore next */ []);
+	triggerData = this.openedWith.asReadonly();
 	activeItemId = signal(null, ...ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []);
 	constructor() {
 		effect(() => {
@@ -15093,12 +15095,14 @@ var MenuComponent = class MenuComponent {
 		if (this.disabled()) return;
 		this.asContextMenu.set(false);
 		this.anchorPoint.set(null);
+		this.openedWith.set(void 0);
 		this.show(triggerEl);
 	}
-	openAsContextMenu(anchorEl, point = null) {
+	openAsContextMenu(anchorEl, point = null, data = void 0) {
 		if (this.disabled()) return;
 		this.asContextMenu.set(true);
 		this.anchorPoint.set(point);
+		this.openedWith.set(data);
 		this.show(anchorEl);
 	}
 	show(triggerEl) {
@@ -15393,6 +15397,95 @@ function fromKeyboard(event) {
 	if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) return event.pointerType === "";
 	return event.button === 0 && event.buttons === 0;
 }
+const LONG_PRESS_TOLERANCE_PX = 10;
+function watchLongPress(element, onLongPress) {
+	let pointerId = null;
+	let start = null;
+	let startTarget = null;
+	let timer = null;
+	let claimed = false;
+	const stopTimer = () => {
+		if (timer !== null) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	};
+	const endPress = () => {
+		stopTimer();
+		pointerId = null;
+		start = null;
+		startTarget = null;
+	};
+	const swallowClick = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		disarmClick();
+	};
+	const disarmClick = () => {
+		window.removeEventListener("click", swallowClick, true);
+		window.removeEventListener("pointerdown", disarmClick, true);
+		window.removeEventListener("keydown", disarmClick, true);
+	};
+	const armClick = () => {
+		disarmClick();
+		window.addEventListener("click", swallowClick, true);
+		window.addEventListener("pointerdown", disarmClick, true);
+		window.addEventListener("keydown", disarmClick, true);
+	};
+	const onPointerDown = (event) => {
+		if (event.pointerType !== "touch" || !event.isPrimary) return;
+		endPress();
+		claimed = false;
+		pointerId = event.pointerId;
+		start = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		startTarget = event.target;
+		timer = setTimeout(() => {
+			timer = null;
+			if (start && onLongPress(start, startTarget)) {
+				claimed = true;
+				armClick();
+				window.getSelection()?.removeAllRanges();
+			}
+		}, 500);
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerId !== pointerId || !start) return;
+		if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > LONG_PRESS_TOLERANCE_PX) stopTimer();
+	};
+	const onPointerEnd = (event) => {
+		if (event.pointerId === pointerId) endPress();
+	};
+	const onContextMenu = (event) => {
+		if (pointerId === null || !(event.target instanceof Node)) return;
+		if (!element.contains(event.target)) return;
+		if (claimed) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		} else stopTimer();
+	};
+	const onSelectStart = (event) => {
+		if (claimed && pointerId !== null) event.preventDefault();
+	};
+	element.addEventListener("pointerdown", onPointerDown);
+	element.addEventListener("pointermove", onPointerMove);
+	element.addEventListener("pointerup", onPointerEnd);
+	element.addEventListener("pointercancel", onPointerEnd);
+	element.addEventListener("selectstart", onSelectStart);
+	window.addEventListener("contextmenu", onContextMenu, true);
+	return () => {
+		endPress();
+		disarmClick();
+		element.removeEventListener("pointerdown", onPointerDown);
+		element.removeEventListener("pointermove", onPointerMove);
+		element.removeEventListener("pointerup", onPointerEnd);
+		element.removeEventListener("pointercancel", onPointerEnd);
+		element.removeEventListener("selectstart", onSelectStart);
+		window.removeEventListener("contextmenu", onContextMenu, true);
+	};
+}
 var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
 	el = inject(ElementRef);
 	target = input(void 0, {
@@ -15400,6 +15493,16 @@ var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
 		alias: "eaContextMenuTrigger"
 	});
 	contextMenuPosition = input("pointer", ...ngDevMode ? [{ debugName: "contextMenuPosition" }] : /* istanbul ignore next */ []);
+	contextMenuData = input(void 0, ...ngDevMode ? [{ debugName: "contextMenuData" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (typeof window === "undefined") return;
+		const host = this.el.nativeElement;
+		inject(DestroyRef).onDestroy(watchLongPress(host, (point) => this.open(point)));
+		effect(() => {
+			if (this.target()) host.style.setProperty("-webkit-touch-callout", "none");
+			else host.style.removeProperty("-webkit-touch-callout");
+		});
+	}
 	onContextMenu(event) {
 		this.request(event);
 	}
@@ -15407,14 +15510,22 @@ var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
 		if (isContextMenuShortcut(event)) this.request(event);
 	}
 	request(event) {
-		const target = this.target();
-		if (!target || event.defaultPrevented) return;
-		if (target instanceof MenuComponent && target.disabled()) return;
+		if (event.defaultPrevented || !this.canOpen()) return;
 		event.preventDefault();
+		this.open(contextMenuPoint(event, this.el.nativeElement));
+	}
+	canOpen() {
+		const target = this.target();
+		return !!target && !(target instanceof MenuComponent && target.disabled());
+	}
+	open(point) {
+		const target = this.target();
+		if (!target || !this.canOpen()) return false;
 		const host = this.el.nativeElement;
-		const point = this.contextMenuPosition() === "pointer" ? contextMenuPoint(event, host) : null;
-		if (target instanceof MenuComponent) target.openAsContextMenu(host, point);
-		else target.requestOpen(point);
+		const at = this.contextMenuPosition() === "pointer" ? point : null;
+		if (target instanceof MenuComponent) target.openAsContextMenu(host, at, this.contextMenuData());
+		else target.requestOpen(at);
+		return true;
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -15444,6 +15555,13 @@ var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			contextMenuData: {
+				classPropertyName: "contextMenuData",
+				publicName: "contextMenuData",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		host: { listeners: {
@@ -15468,6 +15586,7 @@ i0.ɵɵngDeclareClassMetadata({
 			}
 		}]
 	}],
+	ctorParameters: () => [],
 	propDecorators: {
 		target: [{
 			type: i0.Input,
@@ -15484,6 +15603,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "contextMenuPosition",
 				required: false
 			}]
+		}],
+		contextMenuData: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextMenuData",
+				required: false
+			}]
 		}]
 	}
 });
@@ -15753,6 +15880,7 @@ function isModifiedClick(event) {
 var DataTableComponent = class DataTableComponent {
 	i18n = inject(EagamiI18nService);
 	host = inject(ElementRef);
+	rowEls = viewChildren("rowEl", ...ngDevMode ? [{ debugName: "rowEls" }] : /* istanbul ignore next */ []);
 	activeCell = signal({
 		row: 0,
 		col: 0
@@ -15818,6 +15946,7 @@ var DataTableComponent = class DataTableComponent {
 				col: nextCol
 			});
 		});
+		if (typeof window !== "undefined") inject(DestroyRef).onDestroy(watchLongPress(this.host.nativeElement, (point, target) => this.onRowLongPress(point, target)));
 	}
 	sortedData = computed(() => {
 		const items = this.data();
@@ -15899,6 +16028,24 @@ var DataTableComponent = class DataTableComponent {
 		});
 		if (event instanceof KeyboardEvent && !event.defaultPrevented) this.keyboardRequestPending = true;
 	}
+	onRowLongPress(point, target) {
+		if (!(target instanceof Node)) return false;
+		const index = this.rowEls().findIndex((ref) => ref.nativeElement.contains(target));
+		const row = this.sortedData()[index];
+		if (index < 0 || row === void 0) return false;
+		const event = new MouseEvent("contextmenu", {
+			cancelable: true,
+			clientX: point.x,
+			clientY: point.y
+		});
+		this.rowContextMenu.emit({
+			row,
+			rowElement: this.rowEls()[index].nativeElement,
+			point,
+			event
+		});
+		return event.defaultPrevented;
+	}
 	clearKeyboardRequest() {
 		this.keyboardRequestPending = false;
 	}
@@ -16134,6 +16281,12 @@ var DataTableComponent = class DataTableComponent {
 			descendants: true,
 			isSignal: true
 		}],
+		viewQueries: [{
+			propertyName: "rowEls",
+			predicate: ["rowEl"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
 		template: "<ng-template\n  #cellContent\n  let-row\n  let-col=\"col\">\n  @if (col.cellTemplate) {\n    <ng-container\n      [ngTemplateOutlet]=\"col.cellTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, value: getCellValue(row, col.key) }\" />\n  } @else if (col.format) {\n    {{ col.format(getCellValue(row, col.key)) }}\n  } @else {\n    {{ getCellValue(row, col.key) }}\n  }\n</ng-template>\n\n<div\n  class=\"ea-data-table\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-data-table__scroll\">\n    <table\n      class=\"ea-data-table__table\"\n      [attr.role]=\"navigable() ? 'grid' : null\"\n      [attr.aria-label]=\"caption() ? null : (ariaLabel() ?? null)\"\n      [attr.aria-busy]=\"loading() ? 'true' : null\"\n      (keydown)=\"onGridKeydown($event)\"\n      (keyup)=\"clearKeyboardRequest()\"\n      (pointerdown)=\"clearKeyboardRequest()\">\n      @if (caption(); as captionText) {\n        <caption class=\"ea-data-table__caption\">\n          {{ captionText }}\n        </caption>\n      }\n      <thead class=\"ea-data-table__head\">\n        <tr\n          class=\"ea-data-table__row ea-data-table__row--header\"\n          [attr.role]=\"navigable() ? 'row' : null\">\n          @for (col of columns(); track col.key; let colIndex = $index) {\n            <th\n              scope=\"col\"\n              class=\"ea-data-table__cell ea-data-table__cell--header\"\n              [attr.role]=\"navigable() ? 'columnheader' : null\"\n              [attr.data-ea-cell]=\"navigable() ? '0-' + colIndex : null\"\n              [class.ea-data-table__cell--sortable]=\"col.sortable\"\n              [class.ea-data-table__cell--sorted]=\"\n                sort().column === col.key && sort().direction\n              \"\n              [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n              [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n              [style.width]=\"col.width ?? null\"\n              [attr.aria-sort]=\"\n                sort().column === col.key && sort().direction === 'asc'\n                  ? 'ascending'\n                  : sort().column === col.key && sort().direction === 'desc'\n                    ? 'descending'\n                    : col.sortable\n                      ? 'none'\n                      : null\n              \"\n              (keydown.enter)=\"onHeaderKeydown($event, col)\"\n              (keydown.space)=\"onHeaderKeydown($event, col)\"\n              (focus)=\"onCellFocus(0, colIndex)\"\n              [attr.tabindex]=\"headerTabindex(colIndex)\">\n              @if (col.sortable) {\n                <button\n                  type=\"button\"\n                  class=\"ea-data-table__sort-button\"\n                  [attr.tabindex]=\"navigable() ? -1 : null\"\n                  (click)=\"onHeaderClick(col)\"\n                  (focus)=\"onCellFocus(0, colIndex)\">\n                  @if (col.headerTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.headerTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n                  } @else {\n                    <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n                  }\n                  <span class=\"ea-data-table__sort-icon\">\n                    @if (sort().column === col.key && sort().direction === 'asc') {\n                      <ea-icon-arrow-up />\n                    } @else if (\n                      sort().column === col.key && sort().direction === 'desc'\n                    ) {\n                      <ea-icon-arrow-down />\n                    } @else {\n                      <ea-icon-chevrons-up-down />\n                    }\n                  </span>\n                </button>\n              } @else if (col.headerTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"col.headerTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: col }\" />\n              } @else {\n                <span class=\"ea-data-table__header-text\">{{ col.label }}</span>\n              }\n            </th>\n          }\n        </tr>\n      </thead>\n      @if (sizingRows().length) {\n        <tbody\n          class=\"ea-data-table__sizing\"\n          aria-hidden=\"true\">\n          @for (row of sizingRows(); track $index) {\n            <tr class=\"ea-data-table__row ea-data-table__row--sizing\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell ea-data-table__cell--sizing\"\n                  [style.width]=\"col.width ?? null\">\n                  <div class=\"ea-data-table__sizing-content\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"cellContent\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, col }\" />\n                  </div>\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      }\n      <tbody class=\"ea-data-table__body\">\n        @if (loading()) {\n          @for (index of placeholderRows(); track index) {\n            <tr\n              class=\"ea-data-table__row ea-data-table__row--placeholder\"\n              aria-hidden=\"true\"\n              [attr.role]=\"navigable() ? 'row' : null\">\n              @for (col of columns(); track col.key) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\">\n                  @if (col.placeholderTemplate) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"col.placeholderTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: col, index }\" />\n                  } @else {\n                    <span class=\"ea-data-table__placeholder\">\n                      <ea-skeleton height=\"1em\" />\n                    </span>\n                  }\n                </td>\n              }\n            </tr>\n          }\n        } @else if (sortedData().length === 0) {\n          <tr\n            class=\"ea-data-table__row ea-data-table__row--empty\"\n            [attr.role]=\"navigable() ? 'row' : null\">\n            <td\n              class=\"ea-data-table__cell ea-data-table__cell--empty\"\n              [attr.role]=\"navigable() ? 'gridcell' : null\"\n              [attr.colspan]=\"columns().length\">\n              <div role=\"status\">\n                @if (noDataTemplate()) {\n                  <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n                } @else {\n                  {{ resolvedNoDataText() }}\n                }\n              </div>\n            </td>\n          </tr>\n        } @else {\n          @for (\n            row of sortedData();\n            track trackByFn($index, row);\n            let rowIndex = $index\n          ) {\n            <tr\n              #rowEl\n              class=\"ea-data-table__row\"\n              [class.ea-data-table__row--inert]=\"isInert(row)\"\n              [attr.role]=\"navigable() ? 'row' : null\"\n              [attr.tabindex]=\"rowTabindex(row)\"\n              (click)=\"onRowActivate(row, $event)\"\n              (keydown.enter)=\"onRowActivate(row, $event)\"\n              (keydown.space)=\"onRowActivate(row, $event)\"\n              (keydown)=\"onRowContextMenu(row, rowEl, $event)\"\n              (contextmenu)=\"onRowContextMenu(row, rowEl, $event)\">\n              @for (col of columns(); track col.key; let colIndex = $index) {\n                <td\n                  class=\"ea-data-table__cell\"\n                  [class.ea-data-table__cell--align-center]=\"col.align === 'center'\"\n                  [class.ea-data-table__cell--align-right]=\"col.align === 'right'\"\n                  [style.width]=\"col.width ?? null\"\n                  [attr.role]=\"navigable() ? 'gridcell' : null\"\n                  [attr.data-ea-cell]=\"navigable() ? rowIndex + 1 + '-' + colIndex : null\"\n                  [attr.tabindex]=\"bodyCellTabindex(rowIndex + 1, colIndex)\"\n                  (focus)=\"onCellFocus(rowIndex + 1, colIndex)\">\n                  @if (rowHref()?.(row); as url) {\n                    <a\n                      class=\"ea-data-table__row-link\"\n                      [href]=\"url\"\n                      tabindex=\"-1\"\n                      [attr.aria-hidden]=\"colIndex > 0 ? true : null\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"cellContent\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, col }\" />\n                    </a>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"cellContent\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, col }\" />\n                  }\n                </td>\n              }\n            </tr>\n          }\n        }\n      </tbody>\n    </table>\n  </div>\n  <ng-content select=\"ea-paginator\" />\n</div>\n",
 		styles: [".ea-data-table{--ea-data-table-font-size: var(--font-size-md);overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--ea-data-table-background-color, var(--color-bg-base))}.ea-data-table__scroll{overflow-x:auto}.ea-data-table--2xs{--ea-data-table-font-size: var(--font-size-2xs)}.ea-data-table--xs{--ea-data-table-font-size: var(--font-size-xs)}.ea-data-table--sm{--ea-data-table-font-size: var(--font-size-sm)}.ea-data-table--md{--ea-data-table-font-size: var(--font-size-md)}.ea-data-table--lg{--ea-data-table-font-size: var(--font-size-lg)}.ea-data-table--xl{--ea-data-table-font-size: var(--font-size-xl)}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--ea-data-table-font-size);color:var(--ea-data-table-color, var(--color-text-primary));table-layout:auto}.ea-data-table__caption{padding:calc(var(--ea-data-table-font-size) * .5) calc(var(--ea-data-table-font-size) * .75);text-align:start;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);caption-side:top}.ea-data-table__head{background-color:var(--ea-data-table-header-background-color, var(--color-bg-stripe))}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--ea-data-table-header-font-size, calc(var(--ea-data-table-font-size) * .75));line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:var(--ea-data-table-header-text-transform, uppercase);text-align:start;white-space:nowrap;color:var(--ea-data-table-header-color, var(--color-text-secondary));border-bottom:var(--border-width-thin) solid var(--color-border-subtle);-webkit-user-select:none;user-select:none}.ea-data-table__cell--sortable{cursor:pointer;transition:var(--transition-colors)}.ea-data-table__cell--sortable:hover{color:var(--ea-data-table-header-hover-color, var(--color-text-primary));background-color:var(--ea-data-table-header-hover-background-color, var(--color-state-hover))}.ea-data-table__cell--sorted{color:var(--ea-data-table-header-sorted-color, var(--color-brand-text))}.ea-data-table__sort-button{display:inline-flex;align-items:center;width:100%;padding:0;margin:0;font:inherit;text-transform:inherit;letter-spacing:inherit;border:none;background:none;color:inherit;cursor:pointer}.ea-data-table__sort-button:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-data-table__sort-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-data-table__cell--align-center .ea-data-table__sort-button{justify-content:center}.ea-data-table__cell--align-right .ea-data-table__sort-button{justify-content:flex-end}.ea-data-table__header-text{display:inline;vertical-align:middle}.ea-data-table__sort-icon{display:inline-flex;vertical-align:middle;width:1em;height:1em;margin-inline-start:calc(var(--ea-data-table-font-size) * .25);opacity:.5;transition:var(--transition-opacity)}.ea-data-table__cell--sortable:hover .ea-data-table__sort-icon,.ea-data-table__cell--sorted .ea-data-table__sort-icon{opacity:1}.ea-data-table__row{border-bottom:var(--border-width-thin) solid var(--ea-data-table-row-border-color, var(--color-border-subtle));transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom-width:0}.ea-data-table__cell{text-align:start;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:end}.ea-data-table__cell--empty{text-align:center;color:var(--color-text-tertiary);font-style:italic}.ea-data-table--compact .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .375) calc(var(--ea-data-table-font-size) * .75)}.ea-data-table--comfortable .ea-data-table__cell{padding:calc(var(--ea-data-table-font-size) * .625) var(--ea-data-table-font-size)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--ea-data-table-font-size) calc(var(--ea-data-table-font-size) * 1.5)}.ea-data-table__sizing .ea-data-table__row{border-bottom:none}.ea-data-table__sizing .ea-data-table__cell{padding-top:0;padding-bottom:0}.ea-data-table__sizing-content{overflow:hidden;visibility:hidden;height:0}.ea-data-table--sticky .ea-data-table__sizing{display:none}.ea-data-table--sticky{max-height:inherit;height:inherit}.ea-data-table--fixed .ea-data-table__table{table-layout:fixed}.ea-data-table--sticky .ea-data-table__scroll{max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__table{display:flex;flex-direction:column;min-width:calc(var(--ea-data-table-font-size) * 32);max-height:inherit;height:inherit}.ea-data-table--sticky .ea-data-table__head{display:block;flex-shrink:0}.ea-data-table--sticky .ea-data-table__head .ea-data-table__row--header{display:table;width:100%;table-layout:fixed}.ea-data-table--sticky .ea-data-table__body{display:block;overflow-y:auto;flex:1 1 auto;min-height:0}.ea-data-table--sticky .ea-data-table__body .ea-data-table__row{display:table;width:100%;table-layout:fixed}.ea-data-table--striped .ea-data-table__body .ea-data-table__row:nth-child(2n){background-color:var(--ea-data-table-row-stripe-background-color, var(--color-bg-stripe-subtle))}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):not(.ea-data-table__row--inert):not(.ea-data-table__row--placeholder):hover{background-color:var(--ea-data-table-row-hover-background-color, var(--color-state-hover))}@media(forced-colors:active){.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):not(.ea-data-table__row--inert):not(.ea-data-table__row--placeholder):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):not(.ea-data-table__row--inert):not(.ea-data-table__row--placeholder):hover .ea-data-table__cell--sorted{color:HighlightText}}.ea-data-table--clickable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):not(.ea-data-table__row--inert):not(.ea-data-table__row--placeholder){cursor:var(--ea-data-table-row-cursor, pointer)}.ea-data-table--linked .ea-data-table__cell{position:relative}.ea-data-table__row-link{text-decoration:none;color:inherit}.ea-data-table__row-link:hover{color:inherit}.ea-data-table__row-link:after{position:absolute;inset:0;content:\"\"}.ea-data-table__placeholder{display:inline-block;vertical-align:middle;width:100%}.ea-data-table--nowrap .ea-data-table__cell{white-space:nowrap}.ea-data-table--bordered .ea-data-table__cell{border-inline-end:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-inline-end:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-2 * var(--border-width-medium))}@media(forced-colors:active){.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline-color:Highlight}}.ea-data-table--navigable .ea-data-table__cell:focus-visible{box-shadow:none}.ea-data-table__body .ea-data-table__row:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-2 * var(--border-width-medium))}@media(forced-colors:active){.ea-data-table__body .ea-data-table__row:focus-visible{outline-color:Highlight}}\n"],
@@ -16210,6 +16363,10 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
+		rowEls: [{
+			type: i0.ViewChildren,
+			args: ["rowEl", { isSignal: true }]
+		}],
 		columns: [{
 			type: i0.Input,
 			args: [{