@eagami/ui 5.71.2 → 5.72.1
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/fesm2022/eagami-ui.mjs +171 -12
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +41 -6
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -5612,15 +5612,17 @@ function controlErrorStateFrom(control, config) {
|
|
|
5612
5612
|
});
|
|
5613
5613
|
if (host) afterNextRender(() => {
|
|
5614
5614
|
const element = host.nativeElement;
|
|
5615
|
-
const onFocusIn = () => {
|
|
5615
|
+
const onFocusIn = () => untracked(() => {
|
|
5616
5616
|
editing.set(true);
|
|
5617
5617
|
revealedBySubmit.set(false);
|
|
5618
|
-
};
|
|
5618
|
+
});
|
|
5619
5619
|
const onFocusOut = (event) => {
|
|
5620
5620
|
if (event.relatedTarget instanceof Node && element.contains(event.relatedTarget)) return;
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5621
|
+
untracked(() => {
|
|
5622
|
+
editing.set(false);
|
|
5623
|
+
revealedBySubmit.set(false);
|
|
5624
|
+
holdRevealForPress();
|
|
5625
|
+
});
|
|
5624
5626
|
};
|
|
5625
5627
|
editing.set(element.contains(document.activeElement));
|
|
5626
5628
|
element.addEventListener("focusin", onFocusIn);
|
|
@@ -15067,6 +15069,8 @@ var MenuComponent = class MenuComponent {
|
|
|
15067
15069
|
triggerEl = signal(void 0, ...ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []);
|
|
15068
15070
|
asContextMenu = signal(false, ...ngDevMode ? [{ debugName: "asContextMenu" }] : /* istanbul ignore next */ []);
|
|
15069
15071
|
anchorPoint = signal(null, ...ngDevMode ? [{ debugName: "anchorPoint" }] : /* istanbul ignore next */ []);
|
|
15072
|
+
openedWith = signal(void 0, ...ngDevMode ? [{ debugName: "openedWith" }] : /* istanbul ignore next */ []);
|
|
15073
|
+
triggerData = this.openedWith.asReadonly();
|
|
15070
15074
|
activeItemId = signal(null, ...ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []);
|
|
15071
15075
|
constructor() {
|
|
15072
15076
|
effect(() => {
|
|
@@ -15093,12 +15097,14 @@ var MenuComponent = class MenuComponent {
|
|
|
15093
15097
|
if (this.disabled()) return;
|
|
15094
15098
|
this.asContextMenu.set(false);
|
|
15095
15099
|
this.anchorPoint.set(null);
|
|
15100
|
+
this.openedWith.set(void 0);
|
|
15096
15101
|
this.show(triggerEl);
|
|
15097
15102
|
}
|
|
15098
|
-
openAsContextMenu(anchorEl, point = null) {
|
|
15103
|
+
openAsContextMenu(anchorEl, point = null, data = void 0) {
|
|
15099
15104
|
if (this.disabled()) return;
|
|
15100
15105
|
this.asContextMenu.set(true);
|
|
15101
15106
|
this.anchorPoint.set(point);
|
|
15107
|
+
this.openedWith.set(data);
|
|
15102
15108
|
this.show(anchorEl);
|
|
15103
15109
|
}
|
|
15104
15110
|
show(triggerEl) {
|
|
@@ -15393,6 +15399,95 @@ function fromKeyboard(event) {
|
|
|
15393
15399
|
if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) return event.pointerType === "";
|
|
15394
15400
|
return event.button === 0 && event.buttons === 0;
|
|
15395
15401
|
}
|
|
15402
|
+
const LONG_PRESS_TOLERANCE_PX = 10;
|
|
15403
|
+
function watchLongPress(element, onLongPress) {
|
|
15404
|
+
let pointerId = null;
|
|
15405
|
+
let start = null;
|
|
15406
|
+
let startTarget = null;
|
|
15407
|
+
let timer = null;
|
|
15408
|
+
let claimed = false;
|
|
15409
|
+
const stopTimer = () => {
|
|
15410
|
+
if (timer !== null) {
|
|
15411
|
+
clearTimeout(timer);
|
|
15412
|
+
timer = null;
|
|
15413
|
+
}
|
|
15414
|
+
};
|
|
15415
|
+
const endPress = () => {
|
|
15416
|
+
stopTimer();
|
|
15417
|
+
pointerId = null;
|
|
15418
|
+
start = null;
|
|
15419
|
+
startTarget = null;
|
|
15420
|
+
};
|
|
15421
|
+
const swallowClick = (event) => {
|
|
15422
|
+
event.preventDefault();
|
|
15423
|
+
event.stopPropagation();
|
|
15424
|
+
disarmClick();
|
|
15425
|
+
};
|
|
15426
|
+
const disarmClick = () => {
|
|
15427
|
+
window.removeEventListener("click", swallowClick, true);
|
|
15428
|
+
window.removeEventListener("pointerdown", disarmClick, true);
|
|
15429
|
+
window.removeEventListener("keydown", disarmClick, true);
|
|
15430
|
+
};
|
|
15431
|
+
const armClick = () => {
|
|
15432
|
+
disarmClick();
|
|
15433
|
+
window.addEventListener("click", swallowClick, true);
|
|
15434
|
+
window.addEventListener("pointerdown", disarmClick, true);
|
|
15435
|
+
window.addEventListener("keydown", disarmClick, true);
|
|
15436
|
+
};
|
|
15437
|
+
const onPointerDown = (event) => {
|
|
15438
|
+
if (event.pointerType !== "touch" || !event.isPrimary) return;
|
|
15439
|
+
endPress();
|
|
15440
|
+
claimed = false;
|
|
15441
|
+
pointerId = event.pointerId;
|
|
15442
|
+
start = {
|
|
15443
|
+
x: event.clientX,
|
|
15444
|
+
y: event.clientY
|
|
15445
|
+
};
|
|
15446
|
+
startTarget = event.target;
|
|
15447
|
+
timer = setTimeout(() => {
|
|
15448
|
+
timer = null;
|
|
15449
|
+
if (start && onLongPress(start, startTarget)) {
|
|
15450
|
+
claimed = true;
|
|
15451
|
+
armClick();
|
|
15452
|
+
window.getSelection()?.removeAllRanges();
|
|
15453
|
+
}
|
|
15454
|
+
}, 500);
|
|
15455
|
+
};
|
|
15456
|
+
const onPointerMove = (event) => {
|
|
15457
|
+
if (event.pointerId !== pointerId || !start) return;
|
|
15458
|
+
if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > LONG_PRESS_TOLERANCE_PX) stopTimer();
|
|
15459
|
+
};
|
|
15460
|
+
const onPointerEnd = (event) => {
|
|
15461
|
+
if (event.pointerId === pointerId) endPress();
|
|
15462
|
+
};
|
|
15463
|
+
const onContextMenu = (event) => {
|
|
15464
|
+
if (pointerId === null || !(event.target instanceof Node)) return;
|
|
15465
|
+
if (!element.contains(event.target)) return;
|
|
15466
|
+
if (claimed) {
|
|
15467
|
+
event.preventDefault();
|
|
15468
|
+
event.stopImmediatePropagation();
|
|
15469
|
+
} else stopTimer();
|
|
15470
|
+
};
|
|
15471
|
+
const onSelectStart = (event) => {
|
|
15472
|
+
if (claimed && pointerId !== null) event.preventDefault();
|
|
15473
|
+
};
|
|
15474
|
+
element.addEventListener("pointerdown", onPointerDown);
|
|
15475
|
+
element.addEventListener("pointermove", onPointerMove);
|
|
15476
|
+
element.addEventListener("pointerup", onPointerEnd);
|
|
15477
|
+
element.addEventListener("pointercancel", onPointerEnd);
|
|
15478
|
+
element.addEventListener("selectstart", onSelectStart);
|
|
15479
|
+
window.addEventListener("contextmenu", onContextMenu, true);
|
|
15480
|
+
return () => {
|
|
15481
|
+
endPress();
|
|
15482
|
+
disarmClick();
|
|
15483
|
+
element.removeEventListener("pointerdown", onPointerDown);
|
|
15484
|
+
element.removeEventListener("pointermove", onPointerMove);
|
|
15485
|
+
element.removeEventListener("pointerup", onPointerEnd);
|
|
15486
|
+
element.removeEventListener("pointercancel", onPointerEnd);
|
|
15487
|
+
element.removeEventListener("selectstart", onSelectStart);
|
|
15488
|
+
window.removeEventListener("contextmenu", onContextMenu, true);
|
|
15489
|
+
};
|
|
15490
|
+
}
|
|
15396
15491
|
var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
|
|
15397
15492
|
el = inject(ElementRef);
|
|
15398
15493
|
target = input(void 0, {
|
|
@@ -15400,6 +15495,16 @@ var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
|
|
|
15400
15495
|
alias: "eaContextMenuTrigger"
|
|
15401
15496
|
});
|
|
15402
15497
|
contextMenuPosition = input("pointer", ...ngDevMode ? [{ debugName: "contextMenuPosition" }] : /* istanbul ignore next */ []);
|
|
15498
|
+
contextMenuData = input(void 0, ...ngDevMode ? [{ debugName: "contextMenuData" }] : /* istanbul ignore next */ []);
|
|
15499
|
+
constructor() {
|
|
15500
|
+
if (typeof window === "undefined") return;
|
|
15501
|
+
const host = this.el.nativeElement;
|
|
15502
|
+
inject(DestroyRef).onDestroy(watchLongPress(host, (point) => this.open(point)));
|
|
15503
|
+
effect(() => {
|
|
15504
|
+
if (this.target()) host.style.setProperty("-webkit-touch-callout", "none");
|
|
15505
|
+
else host.style.removeProperty("-webkit-touch-callout");
|
|
15506
|
+
});
|
|
15507
|
+
}
|
|
15403
15508
|
onContextMenu(event) {
|
|
15404
15509
|
this.request(event);
|
|
15405
15510
|
}
|
|
@@ -15407,14 +15512,22 @@ var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
|
|
|
15407
15512
|
if (isContextMenuShortcut(event)) this.request(event);
|
|
15408
15513
|
}
|
|
15409
15514
|
request(event) {
|
|
15410
|
-
|
|
15411
|
-
if (!target || event.defaultPrevented) return;
|
|
15412
|
-
if (target instanceof MenuComponent && target.disabled()) return;
|
|
15515
|
+
if (event.defaultPrevented || !this.canOpen()) return;
|
|
15413
15516
|
event.preventDefault();
|
|
15517
|
+
this.open(contextMenuPoint(event, this.el.nativeElement));
|
|
15518
|
+
}
|
|
15519
|
+
canOpen() {
|
|
15520
|
+
const target = this.target();
|
|
15521
|
+
return !!target && !(target instanceof MenuComponent && target.disabled());
|
|
15522
|
+
}
|
|
15523
|
+
open(point) {
|
|
15524
|
+
const target = this.target();
|
|
15525
|
+
if (!target || !this.canOpen()) return false;
|
|
15414
15526
|
const host = this.el.nativeElement;
|
|
15415
|
-
const
|
|
15416
|
-
if (target instanceof MenuComponent) target.openAsContextMenu(host,
|
|
15417
|
-
else target.requestOpen(
|
|
15527
|
+
const at = this.contextMenuPosition() === "pointer" ? point : null;
|
|
15528
|
+
if (target instanceof MenuComponent) target.openAsContextMenu(host, at, this.contextMenuData());
|
|
15529
|
+
else target.requestOpen(at);
|
|
15530
|
+
return true;
|
|
15418
15531
|
}
|
|
15419
15532
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
15420
15533
|
minVersion: "12.0.0",
|
|
@@ -15444,6 +15557,13 @@ var ContextMenuTriggerDirective = class ContextMenuTriggerDirective {
|
|
|
15444
15557
|
isSignal: true,
|
|
15445
15558
|
isRequired: false,
|
|
15446
15559
|
transformFunction: null
|
|
15560
|
+
},
|
|
15561
|
+
contextMenuData: {
|
|
15562
|
+
classPropertyName: "contextMenuData",
|
|
15563
|
+
publicName: "contextMenuData",
|
|
15564
|
+
isSignal: true,
|
|
15565
|
+
isRequired: false,
|
|
15566
|
+
transformFunction: null
|
|
15447
15567
|
}
|
|
15448
15568
|
},
|
|
15449
15569
|
host: { listeners: {
|
|
@@ -15468,6 +15588,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
15468
15588
|
}
|
|
15469
15589
|
}]
|
|
15470
15590
|
}],
|
|
15591
|
+
ctorParameters: () => [],
|
|
15471
15592
|
propDecorators: {
|
|
15472
15593
|
target: [{
|
|
15473
15594
|
type: i0.Input,
|
|
@@ -15484,6 +15605,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
15484
15605
|
alias: "contextMenuPosition",
|
|
15485
15606
|
required: false
|
|
15486
15607
|
}]
|
|
15608
|
+
}],
|
|
15609
|
+
contextMenuData: [{
|
|
15610
|
+
type: i0.Input,
|
|
15611
|
+
args: [{
|
|
15612
|
+
isSignal: true,
|
|
15613
|
+
alias: "contextMenuData",
|
|
15614
|
+
required: false
|
|
15615
|
+
}]
|
|
15487
15616
|
}]
|
|
15488
15617
|
}
|
|
15489
15618
|
});
|
|
@@ -15753,6 +15882,7 @@ function isModifiedClick(event) {
|
|
|
15753
15882
|
var DataTableComponent = class DataTableComponent {
|
|
15754
15883
|
i18n = inject(EagamiI18nService);
|
|
15755
15884
|
host = inject(ElementRef);
|
|
15885
|
+
rowEls = viewChildren("rowEl", ...ngDevMode ? [{ debugName: "rowEls" }] : /* istanbul ignore next */ []);
|
|
15756
15886
|
activeCell = signal({
|
|
15757
15887
|
row: 0,
|
|
15758
15888
|
col: 0
|
|
@@ -15818,6 +15948,7 @@ var DataTableComponent = class DataTableComponent {
|
|
|
15818
15948
|
col: nextCol
|
|
15819
15949
|
});
|
|
15820
15950
|
});
|
|
15951
|
+
if (typeof window !== "undefined") inject(DestroyRef).onDestroy(watchLongPress(this.host.nativeElement, (point, target) => this.onRowLongPress(point, target)));
|
|
15821
15952
|
}
|
|
15822
15953
|
sortedData = computed(() => {
|
|
15823
15954
|
const items = this.data();
|
|
@@ -15899,6 +16030,24 @@ var DataTableComponent = class DataTableComponent {
|
|
|
15899
16030
|
});
|
|
15900
16031
|
if (event instanceof KeyboardEvent && !event.defaultPrevented) this.keyboardRequestPending = true;
|
|
15901
16032
|
}
|
|
16033
|
+
onRowLongPress(point, target) {
|
|
16034
|
+
if (!(target instanceof Node)) return false;
|
|
16035
|
+
const index = this.rowEls().findIndex((ref) => ref.nativeElement.contains(target));
|
|
16036
|
+
const row = this.sortedData()[index];
|
|
16037
|
+
if (index < 0 || row === void 0) return false;
|
|
16038
|
+
const event = new MouseEvent("contextmenu", {
|
|
16039
|
+
cancelable: true,
|
|
16040
|
+
clientX: point.x,
|
|
16041
|
+
clientY: point.y
|
|
16042
|
+
});
|
|
16043
|
+
this.rowContextMenu.emit({
|
|
16044
|
+
row,
|
|
16045
|
+
rowElement: this.rowEls()[index].nativeElement,
|
|
16046
|
+
point,
|
|
16047
|
+
event
|
|
16048
|
+
});
|
|
16049
|
+
return event.defaultPrevented;
|
|
16050
|
+
}
|
|
15902
16051
|
clearKeyboardRequest() {
|
|
15903
16052
|
this.keyboardRequestPending = false;
|
|
15904
16053
|
}
|
|
@@ -16134,6 +16283,12 @@ var DataTableComponent = class DataTableComponent {
|
|
|
16134
16283
|
descendants: true,
|
|
16135
16284
|
isSignal: true
|
|
16136
16285
|
}],
|
|
16286
|
+
viewQueries: [{
|
|
16287
|
+
propertyName: "rowEls",
|
|
16288
|
+
predicate: ["rowEl"],
|
|
16289
|
+
descendants: true,
|
|
16290
|
+
isSignal: true
|
|
16291
|
+
}],
|
|
16137
16292
|
ngImport: i0,
|
|
16138
16293
|
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",
|
|
16139
16294
|
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 +16365,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
16210
16365
|
}],
|
|
16211
16366
|
ctorParameters: () => [],
|
|
16212
16367
|
propDecorators: {
|
|
16368
|
+
rowEls: [{
|
|
16369
|
+
type: i0.ViewChildren,
|
|
16370
|
+
args: ["rowEl", { isSignal: true }]
|
|
16371
|
+
}],
|
|
16213
16372
|
columns: [{
|
|
16214
16373
|
type: i0.Input,
|
|
16215
16374
|
args: [{
|