@eagami/ui 5.48.0 → 5.49.0
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 +30 -107
- package/fesm2022/eagami-ui.mjs +11 -5
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +3 -1
package/README.md
CHANGED
|
@@ -11,93 +11,46 @@
|
|
|
11
11
|
<a href="https://eagami.com/ui/accessibility"><img src="https://img.shields.io/badge/WCAG%202.2%20AA-axe--core%20tested-0b7261" alt="WCAG 2.2 AA, tested with axe-core" /></a>
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
|
-
`@eagami/ui` is a lightweight, accessible Angular component library. Sensible defaults out of the box, with a fully customizable design to fit any brand.
|
|
14
|
+
`@eagami/ui` is a lightweight, accessible Angular component library and design system. Sensible defaults out of the box, with a fully customizable design to fit any brand.
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
<p align="center">
|
|
17
|
+
<a href="https://eagami.com/ui">Documentation</a> · <a href="https://eagami.com/ui/components">Components</a> · <a href="https://eagami.com/ui/icons">Icons</a><br />
|
|
18
|
+
<a href="https://eagami.com/ui/design-tokens">Design tokens</a> · <a href="https://eagami.com/ui/theme-builder">Theme builder</a> · <a href="https://eagami.com/ui/i18n">Internationalization</a> · <a href="https://eagami.com/ui/accessibility">Accessibility</a>
|
|
19
|
+
</p>
|
|
19
20
|
|
|
20
21
|
## Why Eagami UI
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
- **
|
|
25
|
-
- **
|
|
26
|
-
- **
|
|
27
|
-
- **Yours to own.** Plain Angular and CSS with no lock-in: read, copy, or fork any component like the rest of your app.
|
|
28
|
-
- **Modern Angular.** Signals, native control flow, and SSR-safe rendering throughout.
|
|
29
|
-
|
|
30
|
-
| | Eagami UI | Angular Material | PrimeNG | Spartan |
|
|
31
|
-
|---|---|---|---|---|
|
|
32
|
-
| Styling model | CSS custom properties | Sass / Material 3 tokens | Design tokens + presets | Tailwind, copy-paste |
|
|
33
|
-
| Re-skin to any brand | First-class | Within Material Design | Preset-based | You own the markup |
|
|
34
|
-
| Built-in text i18n | 15 languages, runtime | Provide your own | Provide your own | Your markup |
|
|
35
|
-
| Per-component a11y tests | Yes (axe-core) | Backed by the CDK | Varies by component | Your responsibility |
|
|
36
|
-
| Requires a CSS framework | No | No | No | Tailwind |
|
|
37
|
-
| Runtime dependencies | 1 (`tslib`) | Angular CDK | multiple | Tailwind |
|
|
23
|
+
- **THEMES TO YOUR BRAND.** Give it one color per role and it generates a full, contrast-checked palette.
|
|
24
|
+
- **LIGHTWEIGHT.** No runtime dependencies, no CSS framework, and standalone side-effect-free components, so your app bundles only what it imports.
|
|
25
|
+
- **ACCESSIBLE AND LOCALIZED.** Every component meets WCAG 2.2 AA with full keyboard support and its own axe-core test suite. Built-in text ships in 15 languages you can switch at runtime.
|
|
26
|
+
- **YOURS TO OWN.** Plain Angular and CSS with no lock-in: read, copy, or fork any component like the rest of your app.
|
|
27
|
+
- **MODERN ANGULAR.** Signals and native control flow throughout, with SSR-safe rendering, prerendering, and hydration.
|
|
38
28
|
|
|
39
|
-
##
|
|
40
|
-
|
|
41
|
-
The quickest way is the schematic, which installs the package and registers the global stylesheet and fonts for you:
|
|
29
|
+
## Install
|
|
42
30
|
|
|
43
31
|
```bash
|
|
44
32
|
ng add @eagami/ui
|
|
45
33
|
```
|
|
46
34
|
|
|
47
|
-
|
|
35
|
+
The schematic installs the package and registers the global stylesheet and fonts. To wire it up by hand, see [Setup](https://eagami.com/ui/setup).
|
|
48
36
|
|
|
49
|
-
|
|
50
|
-
npm install @eagami/ui
|
|
51
|
-
# or
|
|
52
|
-
pnpm add @eagami/ui
|
|
53
|
-
# or
|
|
54
|
-
yarn add @eagami/ui
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Then add the global stylesheet to your `angular.json`:
|
|
58
|
-
|
|
59
|
-
```json
|
|
60
|
-
"styles": ["node_modules/@eagami/ui/src/styles/eagami-ui.scss"]
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
See the [Setup](https://eagami.com/ui/setup) page for fonts and your first component import.
|
|
64
|
-
|
|
65
|
-
## What's included
|
|
66
|
-
|
|
67
|
-
- **Actions**: Button, Command Palette
|
|
68
|
-
- **Form controls**: Autocomplete, Avatar Editor, Checkbox, Code Input, Color Picker, Date Picker, Dropdown, File Uploader, Form Field, Input, Multi-Select, Number Input, Radio, Range Slider, Rating, Segmented, Slider, Switch, Textarea, Time Picker, Transfer List
|
|
69
|
-
- **Overlays**: Dialog, Drawer, Menu, Popover, Toast, Tooltip
|
|
70
|
-
- **Navigation**: Breadcrumbs, Paginator, Stepper, Tabs
|
|
71
|
-
- **Display**: Accordion, Alert, Avatar, Badge, Card, Data Table, Divider, Eagami Wordmark, Empty State, Progress Bar, Skeleton, Spinner, Tag, Timeline, Tree, Virtual List
|
|
72
|
-
|
|
73
|
-
Full API and live demos at [eagami.com/ui/components](https://eagami.com/ui/components).
|
|
74
|
-
|
|
75
|
-
## Icons
|
|
76
|
-
|
|
77
|
-
Standalone Angular components (`<ea-icon-*>`) that inherit their color and scale with `font-size`, so they render at any size. The library ships the [Feather Icons](https://feathericons.com/) set (286 icons at their canonical slugs) by [Cole Bemis](https://github.com/colebemis), used under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE), plus additional line icons from [Lucide](https://lucide.dev/) (ISC License), a set of original Eagami UI additions (basic shapes, household objects, the Eagami brand mark), and a coloured brand-icon set for nominative use that includes marks from [Simple Icons](https://simpleicons.org/) (CC0).
|
|
78
|
-
|
|
79
|
-
Each icon component exposes `static readonly` metadata so consumers can build catalogues, search indices, or doc tables without importing every icon:
|
|
37
|
+
## Use
|
|
80
38
|
|
|
81
39
|
```ts
|
|
82
|
-
import {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
40
|
+
import { ButtonComponent } from '@eagami/ui';
|
|
41
|
+
|
|
42
|
+
@Component({
|
|
43
|
+
imports: [ButtonComponent],
|
|
44
|
+
template: `<ea-button (clicked)="save()">Save</ea-button>`,
|
|
45
|
+
})
|
|
46
|
+
export class MyComponent {
|
|
47
|
+
save() {}
|
|
48
|
+
}
|
|
88
49
|
```
|
|
89
50
|
|
|
90
|
-
|
|
51
|
+
## Theme
|
|
91
52
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
See [icons](https://eagami.com/ui/icons) for the full set, per-brand guideline links, and a searchable filter.
|
|
95
|
-
|
|
96
|
-
## Theming
|
|
97
|
-
|
|
98
|
-
Every visual property is a CSS custom property on `:root`, so overriding any token retunes the whole library. See [design tokens](https://eagami.com/ui/design-tokens) for the full reference and theming examples.
|
|
99
|
-
|
|
100
|
-
For the brand colour specifically, pass a single hex to `provideEagamiUi` and the library derives a full ten-shade scale (50 through 900) in [OKLCH](https://www.w3.org/TR/css-color-4/#ok-lab) space:
|
|
53
|
+
Pass one color per role to `provideEagamiUi`:
|
|
101
54
|
|
|
102
55
|
```ts
|
|
103
56
|
bootstrapApplication(AppComponent, {
|
|
@@ -112,50 +65,20 @@ bootstrapApplication(AppComponent, {
|
|
|
112
65
|
});
|
|
113
66
|
```
|
|
114
67
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
## Internationalization
|
|
118
|
-
|
|
119
|
-
Built-in strings ship in 15 languages, with runtime switching via `EagamiI18nService`. English is bundled by default; register the other languages you use with `provideEagamiUi({ locales: [...] })` (or pass `EAGAMI_ALL_LOCALES` for all of them) so you ship only what you need, or register `localeLoaders` instead to fetch dictionaries on demand the first time a language is activated. See [internationalization](https://eagami.com/ui/i18n) for setup, lazy loading, and per-string overrides.
|
|
120
|
-
|
|
121
|
-
## Accessibility
|
|
122
|
-
|
|
123
|
-
Every component adheres to WCAG 2.2 Level AA and follows the matching [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) pattern: correct roles and states, full keyboard support with roving tabindex and RTL-aware arrows, focus trapping and restoration in modal surfaces, and live-region announcements for toasts, alerts, and validation errors, localized in all 15 languages. Conformance is self-assessed and continuously verified: each component has an axe-core (vitest-axe) test suite that runs on every change, so regressions in roles, names, contrast, or ARIA usage fail the build. Components that render no visible text expose `aria-label` inputs (with localized defaults for built-in controls), which is the one piece the consuming app must supply. See [accessibility](https://eagami.com/ui/accessibility) for an overview.
|
|
124
|
-
|
|
125
|
-
## Server-side rendering
|
|
126
|
-
|
|
127
|
-
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.
|
|
68
|
+
Everything else is a CSS custom property you can override. See [Design tokens](https://eagami.com/ui/design-tokens).
|
|
128
69
|
|
|
129
70
|
## Testing
|
|
130
71
|
|
|
131
|
-
|
|
72
|
+
`<ea-dialog>` and `<ea-drawer>` are built on the native `<dialog>` element, and `@eagami/ui/testing` keeps them working in jsdom, which lacks `showModal()` and `close()`. Call `installNativeDialogShim()` once from your test setup file:
|
|
132
73
|
|
|
133
74
|
```ts
|
|
134
|
-
// test-setup.ts
|
|
135
75
|
import { installNativeDialogShim } from '@eagami/ui/testing';
|
|
136
76
|
|
|
137
77
|
installNativeDialogShim();
|
|
138
78
|
```
|
|
139
79
|
|
|
140
|
-
##
|
|
141
|
-
|
|
142
|
-
`@eagami/ui` is Angular-only, but its design tokens are framework-agnostic. Self-contained copy-and-paste guides and a machine-readable token export are published with the docs and kept in sync with the token source on every release:
|
|
143
|
-
|
|
144
|
-
- **[React integration guide](https://eagami.com/assets/eagami-ui-react.md)**
|
|
145
|
-
- **[Flutter integration guide](https://eagami.com/assets/eagami-ui-flutter.md)**
|
|
146
|
-
- **[Design tokens as JSON](https://eagami.com/assets/eagami-ui-tokens.json)** (W3C Design Tokens format where practical)
|
|
147
|
-
|
|
148
|
-
## Stability and support
|
|
149
|
-
|
|
150
|
-
Eagami UI follows [Semantic Versioning](https://semver.org). Breaking changes ship only in major releases, are listed under a **Breaking** heading in the [changelog](CHANGELOG.md), and are preceded by a deprecation period wherever practical. See [SUPPORT.md](https://github.com/mwiraszka/eagami/blob/main/SUPPORT.md) for the versioning policy, supported versions, deprecation policy, and how to get help.
|
|
80
|
+
## Links
|
|
151
81
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|---|---|
|
|
156
|
-
| Angular | `^21.0.0 || ^22.0.0` (peer dep) |
|
|
157
|
-
| Node | `>= 20` for build/dev tooling |
|
|
158
|
-
| Rendering | Browser, SSR / prerender (Angular Universal), hydration |
|
|
159
|
-
| Browsers | Last 2 stable versions of Chrome, Edge, Firefox (plus current ESR), Safari |
|
|
160
|
-
|
|
161
|
-
> **Upgrading across a major version?** See [MIGRATION.md](MIGRATION.md).
|
|
82
|
+
<p align="center">
|
|
83
|
+
<a href="CHANGELOG.md">Changelog</a> · <a href="MIGRATION.md">v4.x migration guide</a> · <a href="https://github.com/mwiraszka/eagami/blob/main/SUPPORT.md">Support</a> · <a href="https://github.com/mwiraszka/eagami/blob/main/LICENSE">License</a>
|
|
84
|
+
</p>
|
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -9715,6 +9715,7 @@ class DataTableComponent {
|
|
|
9715
9715
|
* Gives a row its link target, or `null` for none. Every cell of the row then holds
|
|
9716
9716
|
* a real link, so the browser shows the target on hover and a modified click opens
|
|
9717
9717
|
* it elsewhere, while a plain click still emits `rowActivate` for the app to route.
|
|
9718
|
+
* A row given `null` is inert: no link, hover highlight, focus or activation.
|
|
9718
9719
|
*/
|
|
9719
9720
|
rowHref = input(undefined, /* @ts-ignore */
|
|
9720
9721
|
...(ngDevMode ? [{ debugName: "rowHref" }] : /* istanbul ignore next */ []));
|
|
@@ -9842,16 +9843,21 @@ class DataTableComponent {
|
|
|
9842
9843
|
const active = this.activeCell();
|
|
9843
9844
|
return active.row === row && active.col === colIndex ? 0 : -1;
|
|
9844
9845
|
}
|
|
9846
|
+
// A row that `rowHref` gives no target leads nowhere, so it is left inert
|
|
9847
|
+
isInert(row) {
|
|
9848
|
+
const href = this.rowHref();
|
|
9849
|
+
return !!href && href(row) === null;
|
|
9850
|
+
}
|
|
9845
9851
|
// Body rows are keyboard-focusable for activation only in clickable mode, and
|
|
9846
9852
|
// only when grid navigation (which owns cell-level focus) is off.
|
|
9847
|
-
rowTabindex() {
|
|
9848
|
-
return this.clickable() && !this.navigable() ? 0 : null;
|
|
9853
|
+
rowTabindex(row) {
|
|
9854
|
+
return this.clickable() && !this.navigable() && !this.isInert(row) ? 0 : null;
|
|
9849
9855
|
}
|
|
9850
9856
|
// Suppresses the default of Enter/Space and of a row link's plain click, which
|
|
9851
9857
|
// the app routes itself. A modified click on a row link is the browser's to open
|
|
9852
9858
|
// elsewhere. In navigable mode the keydown bubbles up from the focused cell.
|
|
9853
9859
|
onRowActivate(row, event) {
|
|
9854
|
-
if (!this.clickable()) {
|
|
9860
|
+
if (!this.clickable() || this.isInert(row)) {
|
|
9855
9861
|
return;
|
|
9856
9862
|
}
|
|
9857
9863
|
if (event instanceof MouseEvent && isModifiedClick(event)) {
|
|
@@ -9929,7 +9935,7 @@ class DataTableComponent {
|
|
|
9929
9935
|
?.focus();
|
|
9930
9936
|
}
|
|
9931
9937
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9932
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }, sizingRows: { classPropertyName: "sizingRows", publicName: "sizingRows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", 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 }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, rowHref: { classPropertyName: "rowHref", publicName: "rowHref", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], 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 (keydown)=\"onGridKeydown($event)\">\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 (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 class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row, $event)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $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:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);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;box-shadow:var(--shadow-focus-ring)}@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,.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):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):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):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){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--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(-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 });
|
|
9938
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", 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 }, sizingRows: { classPropertyName: "sizingRows", publicName: "sizingRows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, nowrap: { classPropertyName: "nowrap", publicName: "nowrap", 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 }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, rowHref: { classPropertyName: "rowHref", publicName: "rowHref", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", sorted: "sorted", rowActivate: "rowActivate" }, queries: [{ propertyName: "noDataTemplate", first: true, predicate: ["noData"], 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 (keydown)=\"onGridKeydown($event)\">\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 (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 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 @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;box-shadow:var(--shadow-focus-ring)}@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,.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):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):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):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){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--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(-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 });
|
|
9933
9939
|
}
|
|
9934
9940
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
9935
9941
|
type: Component,
|
|
@@ -9939,7 +9945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
|
|
|
9939
9945
|
ChevronsUpDownIconComponent,
|
|
9940
9946
|
NgClass,
|
|
9941
9947
|
NgTemplateOutlet,
|
|
9942
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 (keydown)=\"onGridKeydown($event)\">\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 (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 class=\"ea-data-table__row\"\n [attr.role]=\"navigable() ? 'row' : null\"\n [attr.tabindex]=\"rowTabindex()\"\n (click)=\"onRowActivate(row, $event)\"\n (keydown.enter)=\"onRowActivate(row, $event)\"\n (keydown.space)=\"onRowActivate(row, $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:calc(var(--ea-data-table-font-size) * .75);line-height:var(--text-label-sm-lh);letter-spacing:var(--letter-spacing-wide);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;box-shadow:var(--shadow-focus-ring)}@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,.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):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):hover{background-color:Highlight;color:HighlightText}.ea-data-table--hoverable .ea-data-table__body .ea-data-table__row:not(.ea-data-table__row--empty):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){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--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(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
|
|
9948
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 (keydown)=\"onGridKeydown($event)\">\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 (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 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 @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;box-shadow:var(--shadow-focus-ring)}@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,.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):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):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):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){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--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(-1 * var(--border-width-medium));box-shadow:none}\n"] }]
|
|
9943
9949
|
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], sizingRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizingRows", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], nowrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowrap", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], rowHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHref", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], rowActivate: [{ type: i0.Output, args: ["rowActivate"] }], noDataTemplate: [{ type: i0.ContentChild, args: ['noData', { isSignal: true }] }] } });
|
|
9944
9950
|
|
|
9945
9951
|
/**
|