@eagami/ui 3.1.1 → 3.2.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/README.md +5 -0
- package/fesm2022/eagami-ui.mjs +123 -9
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +15 -1
package/README.md
CHANGED
|
@@ -96,6 +96,10 @@ Every brand-role pairing is checked against WCAG 2.1 AA at bootstrap; a contrast
|
|
|
96
96
|
|
|
97
97
|
Built-in strings ship in English, French (France), Greek, Polish, and Spanish (Spain), with runtime switching via `EagamiI18nService`. See [internationalization](https://eagami.com/ui/i18n) for setup and per-string overrides.
|
|
98
98
|
|
|
99
|
+
## Server-side rendering
|
|
100
|
+
|
|
101
|
+
The library is SSR-safe and renders on the server (Angular Universal / `@angular/ssr`) without reaching for `window` or `document`. Browser-only work (focus management, the native `<dialog>`, overlay positioning, resize/intersection observers) is deferred to the client via `afterNextRender` and `isPlatformBrowser` guards, so prerendering, streaming SSR, and hydration work with no extra configuration.
|
|
102
|
+
|
|
99
103
|
## Framework integration
|
|
100
104
|
|
|
101
105
|
`@eagami/ui` is Angular-only, but its design tokens are framework-agnostic. Copy-and-paste guides for non-Angular targets:
|
|
@@ -109,6 +113,7 @@ Built-in strings ship in English, French (France), Greek, Polish, and Spanish (S
|
|
|
109
113
|
|---|---|
|
|
110
114
|
| Angular | `^21.0.0` (peer dep) |
|
|
111
115
|
| Node | `>= 20` for build/dev tooling |
|
|
116
|
+
| Rendering | Browser, SSR / prerender (Angular Universal), hydration |
|
|
112
117
|
| Browsers | Last 2 stable versions of Chrome, Edge, Firefox (plus current ESR), Safari |
|
|
113
118
|
|
|
114
119
|
> **Upgrading from v0.x?** See [MIGRATION.md](MIGRATION.md).
|
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, signal, inject, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, DestroyRef, afterNextRender, viewChild, ElementRef, HostListener, forwardRef, Renderer2, untracked, ViewEncapsulation, contentChild, viewChildren } from '@angular/core';
|
|
3
|
-
import { NgClass, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
|
|
2
|
+
import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, signal, inject, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, DestroyRef, afterNextRender, viewChild, ElementRef, HostListener, forwardRef, Renderer2, untracked, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID } from '@angular/core';
|
|
3
|
+
import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
|
|
4
4
|
import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
5
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
6
6
|
|
|
@@ -6385,6 +6385,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
6385
6385
|
*/
|
|
6386
6386
|
class DataTableComponent {
|
|
6387
6387
|
i18n = inject(EagamiI18nService);
|
|
6388
|
+
host = inject(ElementRef);
|
|
6389
|
+
// Roving-tabindex active cell for grid navigation. Row 0 is the header row;
|
|
6390
|
+
// body rows are 1..N. Only meaningful while `navigable` is true.
|
|
6391
|
+
activeCell = signal({ row: 0, col: 0 }, ...(ngDevMode ? [{ debugName: "activeCell" }] : /* istanbul ignore next */ []));
|
|
6392
|
+
// Rows skipped per PageUp/PageDown within the grid body.
|
|
6393
|
+
static PAGE_JUMP = 10;
|
|
6388
6394
|
columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
6389
6395
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
6390
6396
|
trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
|
|
@@ -6394,6 +6400,8 @@ class DataTableComponent {
|
|
|
6394
6400
|
hoverable = input(true, ...(ngDevMode ? [{ debugName: "hoverable" }] : /* istanbul ignore next */ []));
|
|
6395
6401
|
bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
6396
6402
|
noDataText = input(undefined, ...(ngDevMode ? [{ debugName: "noDataText" }] : /* istanbul ignore next */ []));
|
|
6403
|
+
/** Enables grid keyboard navigation: `role="grid"`, roving tabindex, and arrow-key cell movement. */
|
|
6404
|
+
navigable = input(false, ...(ngDevMode ? [{ debugName: "navigable" }] : /* istanbul ignore next */ []));
|
|
6397
6405
|
sort = model({ column: '', direction: null }, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
|
|
6398
6406
|
/** Fires whenever the sort column or direction changes via header click. */
|
|
6399
6407
|
sorted = output();
|
|
@@ -6406,7 +6414,22 @@ class DataTableComponent {
|
|
|
6406
6414
|
'ea-data-table--striped': this.striped(),
|
|
6407
6415
|
'ea-data-table--hoverable': this.hoverable(),
|
|
6408
6416
|
'ea-data-table--bordered': this.bordered(),
|
|
6417
|
+
'ea-data-table--navigable': this.navigable(),
|
|
6409
6418
|
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
6419
|
+
constructor() {
|
|
6420
|
+
// Keep the active cell in range as columns or row count change (sort, paging,
|
|
6421
|
+
// data swaps) so a stale index can't strand focus outside the grid.
|
|
6422
|
+
effect(() => {
|
|
6423
|
+
const rows = this.sortedData().length;
|
|
6424
|
+
const cols = this.columns().length;
|
|
6425
|
+
const { row, col } = untracked(this.activeCell);
|
|
6426
|
+
const nextRow = Math.min(row, rows);
|
|
6427
|
+
const nextCol = Math.min(col, Math.max(0, cols - 1));
|
|
6428
|
+
if (nextRow !== row || nextCol !== col) {
|
|
6429
|
+
this.activeCell.set({ row: nextRow, col: nextCol });
|
|
6430
|
+
}
|
|
6431
|
+
});
|
|
6432
|
+
}
|
|
6410
6433
|
sortedData = computed(() => {
|
|
6411
6434
|
const items = this.data();
|
|
6412
6435
|
const { column, direction } = this.sort();
|
|
@@ -6466,8 +6489,91 @@ class DataTableComponent {
|
|
|
6466
6489
|
const key = this.trackBy();
|
|
6467
6490
|
return key ? item[key] : _index;
|
|
6468
6491
|
}
|
|
6492
|
+
// Roving tabindex for a header cell; sortable-only focus outside grid mode
|
|
6493
|
+
headerTabindex(col, colIndex) {
|
|
6494
|
+
if (this.navigable()) {
|
|
6495
|
+
const active = this.activeCell();
|
|
6496
|
+
return active.row === 0 && active.col === colIndex ? 0 : -1;
|
|
6497
|
+
}
|
|
6498
|
+
return col.sortable ? 0 : null;
|
|
6499
|
+
}
|
|
6500
|
+
// Roving tabindex for a body cell; never focusable outside grid mode
|
|
6501
|
+
bodyCellTabindex(row, colIndex) {
|
|
6502
|
+
if (!this.navigable()) {
|
|
6503
|
+
return null;
|
|
6504
|
+
}
|
|
6505
|
+
const active = this.activeCell();
|
|
6506
|
+
return active.row === row && active.col === colIndex ? 0 : -1;
|
|
6507
|
+
}
|
|
6508
|
+
// Syncs roving focus when a cell is focused by mouse or keyboard tab
|
|
6509
|
+
onCellFocus(row, col) {
|
|
6510
|
+
if (!this.navigable()) {
|
|
6511
|
+
return;
|
|
6512
|
+
}
|
|
6513
|
+
const active = this.activeCell();
|
|
6514
|
+
if (active.row !== row || active.col !== col) {
|
|
6515
|
+
this.activeCell.set({ row, col });
|
|
6516
|
+
}
|
|
6517
|
+
}
|
|
6518
|
+
onGridKeydown(event) {
|
|
6519
|
+
if (!this.navigable()) {
|
|
6520
|
+
return;
|
|
6521
|
+
}
|
|
6522
|
+
const cols = this.columns().length;
|
|
6523
|
+
const rows = this.sortedData().length;
|
|
6524
|
+
if (cols === 0) {
|
|
6525
|
+
return;
|
|
6526
|
+
}
|
|
6527
|
+
const { row, col } = this.activeCell();
|
|
6528
|
+
let nextRow = row;
|
|
6529
|
+
let nextCol = col;
|
|
6530
|
+
switch (event.key) {
|
|
6531
|
+
case 'ArrowRight':
|
|
6532
|
+
nextCol = Math.min(cols - 1, col + 1);
|
|
6533
|
+
break;
|
|
6534
|
+
case 'ArrowLeft':
|
|
6535
|
+
nextCol = Math.max(0, col - 1);
|
|
6536
|
+
break;
|
|
6537
|
+
case 'ArrowDown':
|
|
6538
|
+
nextRow = Math.min(rows, row + 1);
|
|
6539
|
+
break;
|
|
6540
|
+
case 'ArrowUp':
|
|
6541
|
+
nextRow = Math.max(0, row - 1);
|
|
6542
|
+
break;
|
|
6543
|
+
case 'Home':
|
|
6544
|
+
nextCol = 0;
|
|
6545
|
+
if (event.ctrlKey) {
|
|
6546
|
+
nextRow = 0;
|
|
6547
|
+
}
|
|
6548
|
+
break;
|
|
6549
|
+
case 'End':
|
|
6550
|
+
nextCol = cols - 1;
|
|
6551
|
+
if (event.ctrlKey) {
|
|
6552
|
+
nextRow = rows;
|
|
6553
|
+
}
|
|
6554
|
+
break;
|
|
6555
|
+
case 'PageDown':
|
|
6556
|
+
nextRow = Math.min(rows, row + DataTableComponent.PAGE_JUMP);
|
|
6557
|
+
break;
|
|
6558
|
+
case 'PageUp':
|
|
6559
|
+
nextRow = Math.max(0, row - DataTableComponent.PAGE_JUMP);
|
|
6560
|
+
break;
|
|
6561
|
+
default:
|
|
6562
|
+
return;
|
|
6563
|
+
}
|
|
6564
|
+
event.preventDefault();
|
|
6565
|
+
if (nextRow !== row || nextCol !== col) {
|
|
6566
|
+
this.focusCell(nextRow, nextCol);
|
|
6567
|
+
}
|
|
6568
|
+
}
|
|
6569
|
+
focusCell(row, col) {
|
|
6570
|
+
this.activeCell.set({ row, col });
|
|
6571
|
+
this.host.nativeElement
|
|
6572
|
+
.querySelector(`[data-ea-cell="${row}-${col}"]`)
|
|
6573
|
+
?.focus();
|
|
6574
|
+
}
|
|
6469
6575
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table class=\"ea-data-table__table\">\n <thead class=\"ea-data-table__head\">\n <tr class=\"ea-data-table__row ea-data-table__row--header\">\n @for (col of columns(); track col.key) {\n <th\n scope=\"col\"\n class=\"ea-data-table__cell ea-data-table__cell--header\"\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 (click)=\"onHeaderClick(col)\"\n (keydown.enter)=\"onHeaderClick(col)\"\n (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n [attr.tabindex]=\"col.sortable ? 0 : null\">\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 @if (col.sortable) {\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 (sort().column === col.key && sort().direction === 'desc') {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @if (sortedData().length === 0) {\n <tr class=\"ea-data-table__row ea-data-table__row--empty\">\n <td\n class=\"ea-data-table__cell ea-data-table__cell--empty\"\n [attr.colspan]=\"columns().length\">\n @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\n </td>\n </tr>\n } @else {\n @for (row of sortedData(); track trackByFn($index, row)) {\n <tr class=\"ea-data-table__row\">\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 @if (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\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{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;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(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.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-left:var(--space-1);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(--color-border-subtle);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.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:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.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:32rem;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(--color-bg-stripe-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-state-hover)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DataTableComponent, isStandalone: true, selector: "ea-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], descendants: true, isSignal: true }], ngImport: i0, template: "<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 (keydown)=\"onGridKeydown($event)\">\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 (click)=\"onHeaderClick(col)\"\n (keydown.enter)=\"onHeaderClick(col)\"\n (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(col, 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 @if (col.sortable) {\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 (sort().column === col.key && sort().direction === 'desc') {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @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 @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\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 class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\">\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 (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\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{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;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(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.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-left:var(--space-1);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(--color-border-subtle);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.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:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.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:32rem;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(--color-bg-stripe-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-state-hover)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"], dependencies: [{ kind: "component", type: ArrowDownIconComponent, selector: "ea-icon-arrow-down" }, { kind: "component", type: ArrowUpIconComponent, selector: "ea-icon-arrow-up" }, { kind: "component", type: ChevronsUpDownIconComponent, selector: "ea-icon-chevrons-up-down" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
6471
6577
|
}
|
|
6472
6578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
6473
6579
|
type: Component,
|
|
@@ -6477,8 +6583,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
6477
6583
|
ChevronsUpDownIconComponent,
|
|
6478
6584
|
NgClass,
|
|
6479
6585
|
NgTemplateOutlet,
|
|
6480
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-data-table\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-data-table__scroll\">\n <table
|
|
6481
|
-
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
|
|
6586
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<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 (keydown)=\"onGridKeydown($event)\">\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 (click)=\"onHeaderClick(col)\"\n (keydown.enter)=\"onHeaderClick(col)\"\n (keydown.space)=\"$event.preventDefault(); onHeaderClick(col)\"\n (focus)=\"onCellFocus(0, colIndex)\"\n [attr.tabindex]=\"headerTabindex(col, 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 @if (col.sortable) {\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 (sort().column === col.key && sort().direction === 'desc') {\n <ea-icon-arrow-down />\n } @else {\n <ea-icon-chevrons-up-down />\n }\n </span>\n }\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"ea-data-table__body\">\n @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 @if (noDataTemplate()) {\n <ng-container [ngTemplateOutlet]=\"noDataTemplate()!\" />\n } @else {\n {{ resolvedNoDataText() }}\n }\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 class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\">\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 (col.cellTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"col.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n value: getCellValue(row, col.key),\n }\" />\n } @else if (col.format) {\n {{ col.format(getCellValue(row, col.key)) }}\n } @else {\n {{ getCellValue(row, col.key) }}\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{overflow:hidden;width:100%;border:var(--border-width-thin) solid var(--color-border-subtle);border-radius:var(--radius-lg);background-color:var(--color-bg-base)}.ea-data-table__scroll{overflow-x:auto}.ea-data-table__table{width:100%;border-spacing:0;border-collapse:collapse;font-family:var(--font-family-sans);font-size:var(--font-size-sm);color:var(--color-text-primary);table-layout:auto}.ea-data-table__head{background-color:var(--color-bg-stripe)}.ea-data-table__cell--header{position:relative;font-weight:var(--font-weight-medium);font-size:var(--text-label-sm-size);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;text-align:left;white-space:nowrap;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(--color-text-primary);background-color:var(--color-state-hover)}.ea-data-table__cell--sortable:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-data-table__cell--sorted{color:var(--color-brand-text)}.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-left:var(--space-1);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(--color-border-subtle);transition:var(--transition-colors)}.ea-data-table__row:last-child{border-bottom:none}.ea-data-table__cell{text-align:left;vertical-align:middle}.ea-data-table__cell--align-center{text-align:center}.ea-data-table__cell--align-right{text-align:right}.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:var(--space-1-5) var(--space-3)}.ea-data-table--comfortable .ea-data-table__cell{padding:var(--space-2-5) var(--space-4)}.ea-data-table--spacious .ea-data-table__cell{padding:var(--space-4) var(--space-6)}.ea-data-table--sticky,.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:32rem;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(--color-bg-stripe-subtle)}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):hover{background-color:var(--color-state-hover)}.ea-data-table--bordered .ea-data-table__cell{border-right:var(--border-width-thin) solid var(--color-border-subtle)}.ea-data-table--bordered .ea-data-table__cell:last-child{border-right:none}.ea-data-table--navigable .ea-data-table__cell:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:calc(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
|
|
6587
|
+
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
|
|
6482
6588
|
|
|
6483
6589
|
/**
|
|
6484
6590
|
* Verification code entry made up of one input per digit. Auto-advances on
|
|
@@ -7214,6 +7320,7 @@ class DialogComponent {
|
|
|
7214
7320
|
dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : /* istanbul ignore next */ []));
|
|
7215
7321
|
previouslyFocused = null;
|
|
7216
7322
|
i18n = inject(EagamiI18nService);
|
|
7323
|
+
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
7217
7324
|
width = input('md', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
7218
7325
|
closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
|
|
7219
7326
|
closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
|
|
@@ -7231,10 +7338,13 @@ class DialogComponent {
|
|
|
7231
7338
|
constructor() {
|
|
7232
7339
|
effect(() => {
|
|
7233
7340
|
const dialogRef = this.dialogEl()?.nativeElement;
|
|
7234
|
-
|
|
7341
|
+
const open = this.open();
|
|
7342
|
+
// `<dialog>` APIs and focus management are browser-only, but the effect
|
|
7343
|
+
// still runs during SSR, so skip the DOM work on the server.
|
|
7344
|
+
if (!dialogRef || !this.isBrowser) {
|
|
7235
7345
|
return;
|
|
7236
7346
|
}
|
|
7237
|
-
if (
|
|
7347
|
+
if (open) {
|
|
7238
7348
|
if (!dialogRef.open) {
|
|
7239
7349
|
this.previouslyFocused = document.activeElement;
|
|
7240
7350
|
dialogRef.showModal();
|
|
@@ -7288,6 +7398,7 @@ class DrawerComponent {
|
|
|
7288
7398
|
drawerEl = viewChild('drawerEl', ...(ngDevMode ? [{ debugName: "drawerEl" }] : /* istanbul ignore next */ []));
|
|
7289
7399
|
previouslyFocused = null;
|
|
7290
7400
|
i18n = inject(EagamiI18nService);
|
|
7401
|
+
isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
7291
7402
|
position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
7292
7403
|
width = input('md', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
7293
7404
|
closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
|
|
@@ -7309,10 +7420,13 @@ class DrawerComponent {
|
|
|
7309
7420
|
constructor() {
|
|
7310
7421
|
effect(() => {
|
|
7311
7422
|
const drawerRef = this.drawerEl()?.nativeElement;
|
|
7312
|
-
|
|
7423
|
+
const open = this.open();
|
|
7424
|
+
// `<dialog>` APIs and focus management are browser-only, but the effect
|
|
7425
|
+
// still runs during SSR, so skip the DOM work on the server.
|
|
7426
|
+
if (!drawerRef || !this.isBrowser) {
|
|
7313
7427
|
return;
|
|
7314
7428
|
}
|
|
7315
|
-
if (
|
|
7429
|
+
if (open) {
|
|
7316
7430
|
if (!drawerRef.open) {
|
|
7317
7431
|
this.previouslyFocused = document.activeElement;
|
|
7318
7432
|
drawerRef.showModal();
|