@lilydesignsystem/angular-data-grid 0.11.0 → 0.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -11
- package/fesm2022/lilydesignsystem-angular-data-grid.mjs +6 -6
- package/fesm2022/lilydesignsystem-angular-data-grid.mjs.map +1 -1
- package/package.json +3 -3
- package/types/lilydesignsystem-angular-data-grid.d.ts +4 -1
- package/types/lilydesignsystem-angular-data-grid.d.ts.map +1 -1
package/README.md
CHANGED
|
@@ -20,7 +20,14 @@ import { DataGrid, type DataGridColumn } from "@lilydesignsystem/angular-data-gr
|
|
|
20
20
|
selector: "app-users",
|
|
21
21
|
standalone: true,
|
|
22
22
|
imports: [DataGrid],
|
|
23
|
-
template: `<lily-data-grid
|
|
23
|
+
template: `<lily-data-grid
|
|
24
|
+
label="Users"
|
|
25
|
+
[columns]="columns"
|
|
26
|
+
[rows]="rows"
|
|
27
|
+
selectionMode="multiple"
|
|
28
|
+
[(selected)]="selected"
|
|
29
|
+
[labels]="labels"
|
|
30
|
+
/>`,
|
|
24
31
|
})
|
|
25
32
|
export class UsersComponent {
|
|
26
33
|
columns: DataGridColumn[] = [
|
|
@@ -33,20 +40,24 @@ export class UsersComponent {
|
|
|
33
40
|
{ name: "Bob", email: "bob@example.com", role: "Editor" },
|
|
34
41
|
];
|
|
35
42
|
selected: string[] = [];
|
|
36
|
-
labels = {
|
|
43
|
+
labels = {
|
|
44
|
+
search: "Search users",
|
|
45
|
+
selectAll: "Select all rows",
|
|
46
|
+
selectRow: (name: string) => `Select ${name}`,
|
|
47
|
+
};
|
|
37
48
|
}
|
|
38
49
|
```
|
|
39
50
|
|
|
40
51
|
## What is Angular-specific
|
|
41
52
|
|
|
42
|
-
| Svelte
|
|
43
|
-
|
|
|
44
|
-
| `selected`, `filter`, `sort`, `columnOrder`, `page` (bindable)
|
|
45
|
-
| `onCellEdit`, `onFilesSelected`, `onFileRemove`, `onRowActivate`, `onExport`
|
|
46
|
-
| `empty`, `footer`, column `cell`, `headerCell`, `avatar`, `personEditor` snippets | `TemplateRef`s: the `empty` and `footer` inputs, and the column's `cell`, `headerCell`, `avatar`, `personEditor` (the context is `$implicit`)
|
|
47
|
-
| rest props on the root
|
|
48
|
-
| `rowAttrs`, column `cellAttrs`
|
|
49
|
-
| `class`
|
|
53
|
+
| Svelte | Angular |
|
|
54
|
+
| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
55
|
+
| `selected`, `filter`, `sort`, `columnOrder`, `page` (bindable) | `model()`s: `[(selected)]`, `[(filter)]`, `[(sort)]`, `[(columnOrder)]`, `[(page)]` |
|
|
56
|
+
| `onCellEdit`, `onFilesSelected`, `onFileRemove`, `onRowActivate`, `onExport` | the outputs `cellEdit`, `filesSelected`, `fileRemove`, `rowActivate`, `exportFile`, and the `exportHandler` input (return `false` to stop the save). An output cannot be tested for a listener, so Enter / a click activates a row only when `[activateRows]="true"` |
|
|
57
|
+
| `empty`, `footer`, column `cell`, `headerCell`, `avatar`, `personEditor` snippets | `TemplateRef`s: the `empty` and `footer` inputs, and the column's `cell`, `headerCell`, `avatar`, `personEditor` (the context is `$implicit`) |
|
|
58
|
+
| rest props on the root | the root `<div class="data-grid">` is inside the `<lily-data-grid>` host; put extra attributes on the host, and `className` on the root |
|
|
59
|
+
| `rowAttrs`, column `cellAttrs` | the same inputs, applied through the `lilyDataGridAttrs` directive |
|
|
60
|
+
| `class` | `className` |
|
|
50
61
|
|
|
51
62
|
Everything else — columns, labels, `rowId`, `selectionMode`, `pageSize`, `storageKey`, `mode`,
|
|
52
63
|
the keyboard model, the cell types, editing, export and virtualization — is as in the Svelte
|
|
@@ -86,7 +97,7 @@ Requires `@lilydesignsystem/angular-headless`.
|
|
|
86
97
|
- **Field-specific search.** `filterField` (a `model()`, `onFilterFieldChange`) limits the text filter to one column; `labels.searchField` (the select's name) with `labels.searchAllFields` (its first option) shows the select, listing the filterable columns. Without a field the whole row is searched.
|
|
87
98
|
- **`movableColumns`** makes every column movable (Alt+Arrow on the header, or drag), unless a column's `movable` is `false`.
|
|
88
99
|
- **Right-to-left.** The horizontal arrows are visual, so in a right-to-left layout (the nearest `dir`, else the computed direction) ArrowLeft goes to the next cell and ArrowRight to the previous, and Alt+Arrow moves a column the way the arrow points. Vertical keys, Home, End and the page keys do not change. The pure `isRtl` / `logicalKey` are exported.
|
|
89
|
-
- **Labels.** `DataGridLabels` is the one bundle of every string. What each feature needs is listed in `CONTROL_LABELS` (labels that
|
|
100
|
+
- **Labels.** `DataGridLabels` is the one bundle of every string. What each feature needs is listed in `CONTROL_LABELS` (labels that _name a control_) and `ANNOUNCEMENT_LABELS` (live-region messages), and `requiredLabels(features)` / `missingLabels(features, labels)` compute it, so an app can assert in a test that its bundle for a locale is complete. In development the grid logs once, naming the labels its features call for that `labels` leaves out (`warnMissingLabels={false}` silences it; it never logs in production). Lily has no English fallback: a missing label is a control with no name or an announcement never made. `sortAnnouncement` receives the ARIA token (`ascending`, `descending`, `none`), which the bundle turns into its own words.
|
|
90
101
|
- **Row attributes.** `rowAttrs(row)` returns attributes spread onto each body row — the way to put test ids (`data-testid`), data attributes and other hooks on rows (`rowAttrs={(row) => ({ "data-testid": `row-${row.id}` })}`); `rowClass` does the same for classes, and a column's `cellAttrs` / `cellClass` for cells.
|
|
91
102
|
|
|
92
103
|
## Pager landmark (0.10.0)
|
|
@@ -884,7 +884,7 @@ var DataGridAttrs = class DataGridAttrs {
|
|
|
884
884
|
static {
|
|
885
885
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
886
886
|
minVersion: "12.0.0",
|
|
887
|
-
version: "22.2.
|
|
887
|
+
version: "22.2.4",
|
|
888
888
|
ngImport: i0,
|
|
889
889
|
type: DataGridAttrs,
|
|
890
890
|
deps: [],
|
|
@@ -894,7 +894,7 @@ var DataGridAttrs = class DataGridAttrs {
|
|
|
894
894
|
static {
|
|
895
895
|
this.ɵdir = i0.ɵɵngDeclareDirective({
|
|
896
896
|
minVersion: "17.1.0",
|
|
897
|
-
version: "22.2.
|
|
897
|
+
version: "22.2.4",
|
|
898
898
|
type: DataGridAttrs,
|
|
899
899
|
isStandalone: true,
|
|
900
900
|
selector: "[lilyDataGridAttrs]",
|
|
@@ -911,7 +911,7 @@ var DataGridAttrs = class DataGridAttrs {
|
|
|
911
911
|
};
|
|
912
912
|
i0.ɵɵngDeclareClassMetadata({
|
|
913
913
|
minVersion: "12.0.0",
|
|
914
|
-
version: "22.2.
|
|
914
|
+
version: "22.2.4",
|
|
915
915
|
ngImport: i0,
|
|
916
916
|
type: DataGridAttrs,
|
|
917
917
|
decorators: [{
|
|
@@ -1945,7 +1945,7 @@ var DataGrid = class DataGrid {
|
|
|
1945
1945
|
static {
|
|
1946
1946
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
1947
1947
|
minVersion: "12.0.0",
|
|
1948
|
-
version: "22.2.
|
|
1948
|
+
version: "22.2.4",
|
|
1949
1949
|
ngImport: i0,
|
|
1950
1950
|
type: DataGrid,
|
|
1951
1951
|
deps: [],
|
|
@@ -1955,7 +1955,7 @@ var DataGrid = class DataGrid {
|
|
|
1955
1955
|
static {
|
|
1956
1956
|
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
1957
1957
|
minVersion: "17.0.0",
|
|
1958
|
-
version: "22.2.
|
|
1958
|
+
version: "22.2.4",
|
|
1959
1959
|
type: DataGrid,
|
|
1960
1960
|
isStandalone: true,
|
|
1961
1961
|
selector: "lily-data-grid",
|
|
@@ -2783,7 +2783,7 @@ var DataGrid = class DataGrid {
|
|
|
2783
2783
|
};
|
|
2784
2784
|
i0.ɵɵngDeclareClassMetadata({
|
|
2785
2785
|
minVersion: "12.0.0",
|
|
2786
|
-
version: "22.2.
|
|
2786
|
+
version: "22.2.4",
|
|
2787
2787
|
ngImport: i0,
|
|
2788
2788
|
type: DataGrid,
|
|
2789
2789
|
decorators: [{
|