@leanix/components 0.4.478 → 0.4.480
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/esm2022/lib/core-ui/components/table/table-header/table-header.component.mjs +23 -8
- package/esm2022/lib/core-ui/components/table/table.component.mjs +40 -1
- package/fesm2022/leanix-components.mjs +61 -7
- package/fesm2022/leanix-components.mjs.map +1 -1
- package/lib/core-ui/components/table/table-header/table-header.component.d.ts +17 -3
- package/lib/core-ui/components/table/table.component.d.ts +41 -2
- package/package.json +1 -1
|
@@ -2,15 +2,29 @@ import { EventEmitter } from '@angular/core';
|
|
|
2
2
|
import { OrderOption, SortingOptions } from '../../../pipes/sort.pipe';
|
|
3
3
|
import { TableComponent } from '../table.component';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* The `lx-th` can be used in combination with `lx-table` to implement sortable `<table>` elements.
|
|
7
|
+
*/
|
|
5
8
|
export declare class TableHeaderComponent {
|
|
6
9
|
#private;
|
|
7
10
|
private parentTable?;
|
|
11
|
+
/**
|
|
12
|
+
* The technical column name.
|
|
13
|
+
*/
|
|
8
14
|
column?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Prevents the user from clearing the sort.
|
|
17
|
+
* Only allowing to toggle between asc & desc.
|
|
18
|
+
*/
|
|
19
|
+
disableSortClear: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Triggers whenever the user changes the sort order.
|
|
22
|
+
*/
|
|
9
23
|
sortChange: EventEmitter<SortingOptions>;
|
|
10
|
-
sortable: import("@angular/core").Signal<boolean>;
|
|
11
|
-
order: import("@angular/core").Signal<OrderOption>;
|
|
24
|
+
readonly sortable: import("@angular/core").Signal<boolean>;
|
|
25
|
+
readonly order: import("@angular/core").Signal<OrderOption>;
|
|
12
26
|
constructor(parentTable?: TableComponent | undefined);
|
|
13
27
|
onSort(): void;
|
|
14
28
|
static ɵfac: i0.ɵɵFactoryDeclaration<TableHeaderComponent, [{ optional: true; }]>;
|
|
15
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TableHeaderComponent, "lx-th", never, { "column": { "alias": "column"; "required": false; }; }, { "sortChange": "sortChange"; }, never, ["*"], true, never>;
|
|
29
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TableHeaderComponent, "lx-th", never, { "column": { "alias": "column"; "required": false; }; "disableSortClear": { "alias": "disableSortClear"; "required": false; }; }, { "sortChange": "sortChange"; }, never, ["*"], true, never>;
|
|
16
30
|
}
|
|
@@ -1,8 +1,47 @@
|
|
|
1
1
|
import { SortingOptions } from '../../pipes/sort.pipe';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* The `lx-table` directive can be applied to `<table>` elements to provide a common styling.
|
|
5
|
+
* Furthermore it supports column sorting in combination with `<lx-th>` for table headers.
|
|
6
|
+
*
|
|
7
|
+
*
|
|
8
|
+
* ## Usage
|
|
9
|
+
*
|
|
10
|
+
* 1. Import the `TableComponent` from `@leanix/components` where you want to use it.
|
|
11
|
+
*
|
|
12
|
+
* ```ts
|
|
13
|
+
* import { TableComponent } from '@leanix/components';
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* ```html
|
|
17
|
+
* <table lx-table></table>
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* ## Sortability
|
|
21
|
+
*
|
|
22
|
+
* To provide sortability within a table, the `isSortable` input has to be set to `true`
|
|
23
|
+
* and the columns that support sorting should be `<lx-th>` elements with a column name applied via the `column` input.
|
|
24
|
+
*
|
|
25
|
+
* By default the sort order of columns can be changed between unsorted, ascending, and descending (after descending back to unsorted).
|
|
26
|
+
* To prevent the user from clearing the sort order and just allow toggling between ascending and descending the `disableSortClear` input can be set to `true`.
|
|
27
|
+
*
|
|
28
|
+
* ```html
|
|
29
|
+
* <table lx-table [isSortable]="true">
|
|
30
|
+
* <thead>
|
|
31
|
+
* <lx-th column="column1" [disableSortClear]="false">Column 1</lx-th>
|
|
32
|
+
* </thead>
|
|
33
|
+
* </table>
|
|
34
|
+
* ```
|
|
35
|
+
*/
|
|
3
36
|
export declare class TableComponent {
|
|
4
|
-
|
|
5
|
-
|
|
37
|
+
/**
|
|
38
|
+
* This enables or disables the sortability of the table.
|
|
39
|
+
*/
|
|
40
|
+
readonly isSortable: import("@angular/core").InputSignal<boolean>;
|
|
41
|
+
/**
|
|
42
|
+
* The sort state of the table. Which column is sorted in what order.
|
|
43
|
+
*/
|
|
44
|
+
readonly sort: import("@angular/core").ModelSignal<SortingOptions>;
|
|
6
45
|
onTableHeaderSortChange(sort: SortingOptions): void;
|
|
7
46
|
static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
|
|
8
47
|
static ɵdir: i0.ɵɵDirectiveDeclaration<TableComponent, "table[lx-table]", never, { "isSortable": { "alias": "isSortable"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; }, never, never, true, never>;
|