@eagami/ui 5.48.0 → 5.49.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.
Files changed (5) hide show
  1. package/README.md +30 -107
  2. package/fesm2022/eagami-ui.mjs +13 -7
  3. package/fesm2022/eagami-ui.mjs.map +1 -1
  4. package/package.json +1 -1
  5. 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
- **Live documentation:** [eagami.com/ui](https://eagami.com/ui)
17
-
18
- **Try it live:** [open a starter on StackBlitz](https://stackblitz.com/github/mwiraszka/eagami/tree/main/examples/starter), no install needed.
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
- Angular teams usually reach for [Angular Material](https://material.angular.dev), [PrimeNG](https://primeng.org), or a Tailwind copy-paste kit like [Spartan](https://spartan.ng). Eagami UI is different where it counts:
23
-
24
- - **Themes to your brand.** Give it one color per role and it generates a full, accessibility-checked palette; every other style is a CSS variable you can override (see [design tokens](https://eagami.com/ui/design-tokens)). Light and dark are built in and follow the system preference.
25
- - **Lightweight.** One runtime dependency (`tslib`), no CSS framework, and standalone side-effect-free components, so your app bundles only what it imports (the whole library, every component and icon, is ~260 KB gzipped).
26
- - **Accessible and localized out of the box.** Every component is keyboard-navigable and screen-reader-ready, with built-in text in 15 languages you can switch at runtime.
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
- ## Installation
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
- Prefer to wire it up by hand? Install the package:
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
- ```bash
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 { GithubIconComponent } from '@eagami/ui';
83
-
84
- GithubIconComponent.slug; // 'github'
85
- GithubIconComponent.category; // 'feather'
86
- GithubIconComponent.isBrand; // true
87
- GithubIconComponent.tags; // ['github', 'git', 'repository', ...]
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
- The shape of this metadata is described by the exported `IconCategory`, `IconMeta`, and `IconComponentType` types. Every icon component extends the abstract `IconComponentBase` directive, which contributes the shared `display: inline-flex; width: 1em; height: 1em` host bindings.
51
+ ## Theme
91
52
 
92
- For catalogue-style use cases, import the `ICONS` array (a slug-sorted, `ReadonlyArray<IconComponentType>` of every non-deprecated icon) and the `iconDisplayName(iconOrSlug)` helper that resolves the human-readable label with the correct casing for acronyms and brand marks (`GitHub`, `npm`, `CodePen`, `X (Twitter)`, etc.). Importing `ICONS` pulls every icon into the bundle, so apps that only render a handful should keep importing the components they use directly.
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
- Every brand-role pairing is checked against WCAG 2.1 AA at bootstrap; a contrast violation throws before the app loads. Pin specific shades with `overrides` or remap which derived shade backs each role with `roles`. See [design tokens](https://eagami.com/ui/design-tokens) for the full API.
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
- jsdom implements `<dialog>` without `showModal()` or `close()`, so a unit test that creates a component holding an open `<ea-dialog>` or `<ea-drawer>` throws before the spec body runs. The `@eagami/ui/testing` entry point ships a shim that fills in the missing methods; it patches only what the runtime lacks, so it is a no-op in real browsers. Call it once from your test setup file:
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
- ## Framework integration
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
- ## Compatibility
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
@@ -7487,11 +7487,11 @@ class CardComponent {
7487
7487
  }), /* @ts-ignore */
7488
7488
  ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
7489
7489
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7490
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, headerDivider: { classPropertyName: "headerDivider", publicName: "headerDivider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n @if (headerDivider()) {\n <ea-divider class=\"ea-card__divider\" />\n }\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-width:0;max-width:100%;min-height:0}ea-card:has(>.ea-card--full-width){width:100%}.ea-card{display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-elevated);border:var(--border-width-thin) solid var(--color-border-default);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none>.ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none>.ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none>.ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__divider{margin:var(--space-2) var(--space-4) 0}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "component", type: DividerComponent, selector: "ea-divider", inputs: ["orientation", "label", "thick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
7490
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, headerDivider: { classPropertyName: "headerDivider", publicName: "headerDivider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n @if (headerDivider()) {\n <ea-divider class=\"ea-card__divider\" />\n }\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-width:0;max-width:100%;min-height:0}ea-card:has(>.ea-card--full-width){width:100%}.ea-card{overflow:clip;display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-card--elevated{background-color:var(--color-bg-elevated);border:var(--border-width-thin) solid var(--color-border-default);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none>.ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none>.ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none>.ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__divider{margin:var(--space-2) var(--space-4) 0}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "component", type: DividerComponent, selector: "ea-divider", inputs: ["orientation", "label", "thick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
7491
7491
  }
7492
7492
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CardComponent, decorators: [{
7493
7493
  type: Component,
7494
- args: [{ selector: 'ea-card', imports: [DividerComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n @if (headerDivider()) {\n <ea-divider class=\"ea-card__divider\" />\n }\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-width:0;max-width:100%;min-height:0}ea-card:has(>.ea-card--full-width){width:100%}.ea-card{display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-elevated);border:var(--border-width-thin) solid var(--color-border-default);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none>.ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none>.ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none>.ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__divider{margin:var(--space-2) var(--space-4) 0}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"] }]
7494
+ args: [{ selector: 'ea-card', imports: [DividerComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div\n class=\"ea-card__header\"\n [style.text-align]=\"headerAlign()\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n @if (headerDivider()) {\n <ea-divider class=\"ea-card__divider\" />\n }\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</div>\n", styles: ["ea-card{display:block;min-width:0;max-width:100%;min-height:0}ea-card:has(>.ea-card--full-width){width:100%}.ea-card{overflow:clip;display:flex;flex-direction:column;min-width:0;max-width:100%;min-height:0;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-card--elevated{background-color:var(--color-bg-elevated);border:var(--border-width-thin) solid var(--color-border-default);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none>.ea-card__header{padding:var(--ea-card-header-padding, 0)}.ea-card--padding-none>.ea-card__body{padding:var(--ea-card-body-padding, 0)}.ea-card--padding-none>.ea-card__footer{padding:var(--ea-card-footer-padding, 0)}.ea-card--padding-sm>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-3) var(--space-3) 0)}.ea-card--padding-sm>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-3))}.ea-card--padding-sm>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-3) var(--space-3))}.ea-card--padding-md>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-4) var(--space-4) 0)}.ea-card--padding-md>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-4))}.ea-card--padding-md>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-4) var(--space-4))}.ea-card--padding-lg>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-6) var(--space-6) 0)}.ea-card--padding-lg>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-6))}.ea-card--padding-lg>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-6) var(--space-6))}.ea-card--padding-xl>.ea-card__header{padding:var(--ea-card-header-padding, var(--space-8) var(--space-8) 0)}.ea-card--padding-xl>.ea-card__body{padding:var(--ea-card-body-padding, var(--space-8))}.ea-card--padding-xl>.ea-card__footer{padding:var(--ea-card-footer-padding, 0 var(--space-8) var(--space-8))}.ea-card--full-width{width:100%}.ea-card__divider{margin:var(--space-2) var(--space-4) 0}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"] }]
7495
7495
  }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], headerDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerDivider", required: false }] }] } });
7496
7496
 
7497
7497
  /**
@@ -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
  /**